Question

我一直在搞乱这一点，并且无法弄清楚为什么这不会关闭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;
        }

    });
});

这是一个提示div的小提琴，我需要一种方法让它恢复原状。

http://jsfiddle.net/Gn8Dk/

Answer 1

你必须提供标记，并且如@adeneo所评论，提供一个小提琴来提供解决方案。这是我如何解释你的要求（注意我只是使用切换来来回滑动div）。这是小提琴http://jsfiddle.net/UT2R8/1/

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

对于您的信息，您的要求的第一部分将对您提供的脚本进行微小更改。根据您的代码，每次点击都会将您的oldid设置为“”。因此，您需要将其移动到点击范围之外。通过该更改，您的代码应该部分工作。这是完整解决方案的小提琴。 http://jsfiddle.net/pCEDw/4/

<强>脚本

$(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 = "";
        }

    });
});

Answer 2

尝试：

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;

要：

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

如果单击相同的ID，则关闭滑块

2 个答案: