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检查span的父LI的索引。如果它为0，那么我们将togglHeight设置为146，如果它是1 （或列表中的第二个li）那么我们将它设置为380等等。只需使用一个简单的女巫声明比较一下。

jquery切换多个触发器

1 个答案: