jquery - 带有多个触发器的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检查跨度的父 LI 的索引。如果它是 0，那么我们设置togglHeight为 146，如果它是 1 （或列表中的第 2 个 li），那么我们将它设置为 380，等等。只是使用一个简单的女巫语句比较不雅。