雙擊事件

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