Question

我有一个项目组合列表。当我点击特定的，它的相关div slideDown你可以通过点击关闭链接关闭（slideUp）。工作正常，但是当点击其他项目时事件会激发，因此它会因为类名关系而滑动上下两次？我正在使用index（）来绘制元素，因此将divs ID赋予0,1,2,3,4,5,6 ....

有人可以为这个或更好的解决方案解释一个好的解决方法吗？

HTML Markup example:

<div style="display:none;" id="0" class="sliderwrapper">
   <div class="close"> <a href="#" title="Close"> Close </a></div>
   //SINGLE PORTFOLIO ITEM CONTENT
</div>

<div style="display:none;" id="1" class="sliderwrapper">
   <div class="close"> <a href="#" title="Close"> Close </a></div>
   //SINGLE PORTFOLIO ITEM CONTENT
</div>

<div style="display:none;" id="2" class="sliderwrapper">
   <div class="close"> <a href="#" title="Close"> Close </a></div>
   //SINGLE PORTFOLIO ITEM CONTENT
</div>

JS:

(function(){

    $('.close').on('click', function(){
      $('.sliderwrapper').slideUp(800);
    });

    $('.singleitems ul li').on('click', function(){
      var index = $(this).index();
      $('.sliderwrapper').slideUp(800, function(){

          $('#' + index).slideDown(800);
      });

    });

})();

Answer 1

如果您只是将slideDown更改为回调函数，则只会调用一次。

此代码可防止动画重叠：

$(document).ready(function() {
    var selected = false;
    $('.close').on('click', function() {
        $(this).parent('.sliderwrapper').slideUp(800);
        selected = false;
    });

    $('.singleitems ul li').live('click', function() {
        var index = $(this).index();

        if(!selected) {
            $("#" + index).slideDown(800);
            selected = true;
        } else {
            $(".sliderwrapper").filter(":visible").slideUp(800, function() {
                $("#" + index).filter(":hidden").slideDown(800);
            });
        }
    });
});

双重射击事件

1 个答案: