0

我已经搞砸了一段时间，无法弄清楚为什么这没有关闭 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/

4

2 回答 2

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

    });
});
于 2013-07-15T01:34:34.610 回答
0

尝试：

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; 
}
于 2013-07-14T23:27:01.330 回答