双击事件

Question

我有一个投资组合项目表。当我点击特定的，其相关的div slidesDown，你可以通过点击关闭链接关闭（slideUp）。 工作正常，但当点击其他项目时，事件会双击，所以它会滑动两次，因为类名关系？ 我使用指数（）中把握的元素，因此由0,1,2,3,4,5,6 ....给予的div ID的

有人能解释一个很好的解决方法，以这种或解决方案更好

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); 
      }); 
     } 
    }); 
});​ 
​