Javascript 如果单击了相同的id，则关闭滑块

我已经在这上面乱搞了一段时间了，不明白为什么它没有关闭div。我有一个div（id=“sideslider”），当单击五个图像中的一个时，它会从页面底部向上滑动。如果用户单击同一个图像，我希望它关闭。如果在单击其他图像时将其关闭并重新打开，这将是一个加号

$(document).ready(function () {
    $("#sidefooter").click(function(event) {
        id = event.target.id;
        console.log(oldid);
        console.log(id);
        $("#sideslider").load("sidefooter.php #" + id)
        var oldid = "";
        if (id !== oldid) {
            $('#sideslider').stop(true).animate({ 'margin-bottom': 0, 'opacity': '1' }, { queue: false, duration: 300 });
        oldid = id;
        }
        else if(id == oldid){
                $('#sideslider').stop(true).animate({ 'margin-bottom': -70, 'opacity': '0' }, { queue: false, duration: 300 });
           oldid = id;
        }

    });
});

这是一把提琴，用来调提琴，我需要一个方法把它调下来

试试：

var last = false;
$("img").click(function () {
  if ($('#sideslider').css('margin-bottom') == 0) {
      if (last != false && $(this) != last) {
          $('#sideslider').stop(true).animate({ 'margin-bottom': -70, 'opacity': '0' }, { queue: false, duration: 300 }).animate({ 'margin-bottom': 0, 'opacity': '1' }, { queue: false, duration: 300 });
      } else {
          $('#sideslider').stop(true).animate({ 'margin-bottom': -70, 'opacity': '0' }, { queue: false, duration: 300 });
      }
  } else {
      $('#sideslider').stop(true).animate({ 'margin-bottom': 0, 'opacity': '1' }, { queue: false, duration: 300 });
  }
  last = $(this);
});

您可以将

$（“img”）

更改为实际图像元素。我还添加了您想要的附加值。但是，我没有测试这段代码

您也可以尝试更改：

if (typeof(id) != "undefined" && id !== null){
    oldid = id; 
}
id = event.target.id;

致：

---

您必须提供标记，正如@adeneo所评论的，提供一个提琴来给出解决方案。下面是我如何解释您的需求（注意，我只是使用toggle来回滑动div）。这是小提琴

在有问题的进一步信息后编辑

对于您的信息，您的需求的第一部分将与您提供的脚本的微小更改一起工作。根据您的代码，每次单击时，您的旧ID都设置为“”。因此，您需要将其移动到单击范围之外。有了这些更改，您的代码应该可以部分工作。这是完整解决方案的关键

脚本

$(document).ready(function () {
    var oldid = "";
    $("#sidefooter").click(function(event) {
        id = event.target.id;

        console.log(oldid);
        console.log(id);
        $("#sideslider").load("sidefooter.php #" + id)

        if (id != oldid && oldid != "") {                
            $('#sideslider').stop(true).animate({ 'margin-bottom': -70, 'opacity': '0' },300).delay(300).queue(function() { $(this).stop(true).animate({ 'margin-bottom': 0, 'opacity': '1' }, 300);
                                                                                                                          $("#sideslider").html('Content yay. you clicked - ' + id);
                                                                                                                          });         
        oldid = id;
        }
        else if (id != oldid) { $('#sideslider').stop(true).animate({ 'margin-bottom': 0, 'opacity': '1' }, { queue: false, duration: 300 }); $("#sideslider").html('Content yay. you clicked - ' + id);  oldid = id;
        }           
        else if(id == oldid){                    
                $('#sideslider').stop(true).animate({ 'margin-bottom': -70, 'opacity': '0' }, { queue: false, duration: 300 });
           oldid = "";
        }

    });
});

---

它看起来太复杂了，从一开始看起来，它似乎只需要几行代码就可以完成，但是你应该设置一个提琴，让我们更容易测试它。我已经添加了一个提琴，并将我的代码更新到我最近的迭代中。晚饭后我将尝试一些建议的解决方案：）谢谢大家@贾斯汀我根据问题的变化编辑了我的答案。看看这是怎么回事！谢谢Prashanth，我知道我错在哪里了。还有很多东西要学：）

$(document).ready(function () {
    var oldid = "";
    $("#sidefooter").click(function(event) {
        id = event.target.id;

        console.log(oldid);
        console.log(id);
        $("#sideslider").load("sidefooter.php #" + id)

        if (id != oldid && oldid != "") {                
            $('#sideslider').stop(true).animate({ 'margin-bottom': -70, 'opacity': '0' },300).delay(300).queue(function() { $(this).stop(true).animate({ 'margin-bottom': 0, 'opacity': '1' }, 300);
                                                                                                                          $("#sideslider").html('Content yay. you clicked - ' + id);
                                                                                                                          });         
        oldid = id;
        }
        else if (id != oldid) { $('#sideslider').stop(true).animate({ 'margin-bottom': 0, 'opacity': '1' }, { queue: false, duration: 300 }); $("#sideslider").html('Content yay. you clicked - ' + id);  oldid = id;
        }           
        else if(id == oldid){                    
                $('#sideslider').stop(true).animate({ 'margin-bottom': -70, 'opacity': '0' }, { queue: false, duration: 300 });
           oldid = "";
        }

    });
});