0

3 つの個別のトリガーでトリガーする必要がある jquery トグルがあります。私はこれを見つけました： jQueryは、2つの異なるトリガーで単一のdivを切り替えます

...しかし、特定の高さにアニメーション化するにはトグルが必要です。これが私の現在のコードです：

<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>

どんな助けでも大歓迎です。ありがとうございました。

4

1 に答える 1

0

やりたいことをどうしてやりたいのかわからない…だから聞かないで、届けてあげるだけ。

$(".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 の場合はtogglHeight146 に設定し、1 (またはリストの 2 番目の li) の場合は 380 に設定します。指数を比較する単純な witch ステートメントを使用するだけです。

于 2012-08-16T14:10:29.830 に答える