0

我有一个投资组合项目清单。当我单击特定时，其相关的 div 会滑下，您可以通过单击关闭链接来关闭 (slideUp)。工作正常，但是当点击其他项目时，事件会双重触发，所以它会上下滑动两次，因为类名关系？我正在使用 index() 来获取元素，因此将 div 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);
      });

    });

})();
4

1 回答 1

2

如果您只是将 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);
            });
        }
    });
});​
​
于 2012-04-22T09:20:07.417 回答