jQuery與多個觸發器切換

Question

我有一個jQuery的切換，我需要觸發3個單獨的觸發器。我發現這個： jQuery toggle single div with two different triggers

...但我需要切換動畫到特定的高度。這裏是我當前的代碼：

<script type='text/javascript'> 
$(function(){ 
$(".nav-toggle").toggle(function(){ 
    $("#main-nav-dropdown").animate({height:146},500); 
},function(){ 
    $("#main-nav-dropdown").animate({height:20},500); 
}); 
}); 
</script> 

和HTML

<div id="main-nav-dropdown"> 
    <div class="capsule"> 

      <nav id="main-nav"> 
      <ul> 

       <li><span class="nav-toggle">1</span> 
       </li> 
       <li><span class="nav-toggle">2</span>   
       </li> 
       <li><span class="nav-toggle">3</span>    
       </li> 

       <li class="last"><a href="">4</a></li> 
      </ul> 
     </nav> 

    </div> 
</div> 

任何幫助，將不勝感激。謝謝。

Answer 1

我不知道爲什麼你想要做你想做的事......什麼，所以我不會問，而是我「會剛剛交付。

$(".nav-toggle").toggle(function(){ 
    var pI = $(this).parent().parent().find($(this).parent()).index(), 
     toggleHeight; 

    switch(pI){ 
    case 0: 
     toggleHeight = "146" 
     break;  
    case 1: 
     toggleHeight = "380" 
     break; 
    case 2: 
     toggleHeight = "550" 
     break;   

    case 'default' : 
     toggleHeight = "146" 
     //fallback solution if for some reason we can't get the index. 
     break;  
    } 

    $("#main-nav-dropdown").animate({height:toggleHeight},500); 

},function(){ 
    $("#main-nav-dropdown").animate({height:20},500); 
}); 

基本上，var pI檢查指標如果它是0，那麼我們將togglHeight設置爲146，如果它是1 （或者列表中的第二個li）那麼我們將它設置爲380等等。只是使用簡單的比較indecies的女巫語句。