Javascriptの3レベル折りたたみメニュー

Question

私は完全なアマチュアをコーディングしています。クリックすると拡大される3レベル折りたたみメニューが必要です。既存のコードをいくつか見つけましたが、2レベルのメニュー用にのみ設計されています。スクリプトを変更して、クリックしたときに3番目のレベルが開くようにする方法はありません。どんなアイデアでもが高く評価されます！ここで

は、既存のスクリプトです：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
    <!-- <script type="text/javascript" language="javascript" charset="utf-8" src="nav.js"></script> --> 
 
<!--[if lt IE 9]> 
 
    <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
<![endif]--> 
 

 

 
    <script> 
 
    $(document).ready(function(){ 
 
    $("#nav > li > a").on("click", function(e){ 
 
    if($(this).parent().has("ul")) { 
 
     e.preventDefault(); 
 
    } 
 

 
    if(!$(this).hasClass("open")) { 
 
     // hide any open menus and remove all other classes 
 
     $("#nav li ul").slideUp(350); 
 
     $("#nav li a").removeClass("open"); 
 
     
 
     // open our new menu and add the open class 
 
     $(this).next("ul").slideDown(350); 
 
     $(this).addClass("open"); 
 
    } 
 
    
 
    else if($(this).hasClass("open")) { 
 
     $(this).removeClass("open"); 
 
     $(this).next("ul").slideUp(350); 
 
    } 
 
    }); 
 
}); 
 
</script>

Answer 1

あなたがそこに持っているものに比べて比較的少ないコードで同じ結果を達成することができます。

表示を処理するためにCSSを使用することは、間違いなく管理しやすくなります.JAScriptでは、単純にCSSでターゲティングできるクラスを切り替えるだけです。また、あなたはあなたが望むだけ多くのレベルを持つことができます。それは私がこれを書いたCSSの次の兄弟セレクタの使用+

$('.menu-trigger').click(function(){ 
 
    $(this).toggleClass('active') 
 
    
 
    // if you really wish to keep the jquery animation you can do this 
 
    // $(this).next('ul').slideToggle() 
 
})

/* you can use the sibling selector '+' to target the list */ 
 
.menu-trigger + ul { 
 
    display: none; 
 
} 
 

 
.menu-trigger.active + ul { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a class="menu-trigger">parent</a> 
 
    <ul> 
 
     <li> 
 
     <a class="menu-trigger">child</a> 
 
     <ul> 
 
      <li> 
 
      <a class="menu-trigger">grandchild</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

を介して動作

、それは簡単ですが、種類のあなたが達成したいものを示しています。 synthet1c @

$('li').hover(function(){ 
    $(this).children('ul:eq(0)').show(); 
}, function(){ 
    $(this).children('ul:eq(0)').hide(); 
}); 

http://codepen.io/clarenswd/pen/GjBaWp