Toggle Menu個々の入力キーからのリスト

いくつかのJqueryの実践Enterを押したときに展開したい単純な順序付けされていないリストがあります。しかし、私が押しているものだけがそのすべてに入るのではない。おそらくそれを間違って設定します。現時点では、両方の項目を拡大しています。 $(this).children('ul.subMenu')へToggle Menu個々の入力キーからのリスト

<nav> 
<ul> 
    <li class="menu"><a href="#">Menu 1</a> 
    <ul class="subMenu"> 
     <li> 
     <a href="">Sub Menu 1</a> 
     </li> 
    </ul> 
    </li> 
    <li class="menu"><a href="#">Menu 2</a> 
    <ul class="subMenu"> 
     <li> 
     <a href="">Sub Menu 1</a> 
     </li> 
     <li> 
     <a href="">Sub Menu 2</a> 
     </li> 
    </ul> 
    </li> 
</ul>

$('.menu').keydown(function(event){ 
var keycode = (event.keyCode ? event.keyCode : event.which); 
if(keycode == '13'){ 
    $('ul.subMenu').toggleClass('show'); 
} 
});

出典

2016-08-07 Daniel Rubio

変更$('ul.subMenu')。これにより、ul.subMenuセレクタ（必要に応じて）と一致する現在の要素（すべてではない）の子のみが検索されます。

詳細については、jQuery children([selector])関数を参照してください。あなたはこのコードを使用することができます

出典

2016-08-07 05:04:43

。ありがとうございます –

@DanielRubio私は助けてうれしいです！あなたの問題を解決したことをコミュニティに示すには、この回答を受け入れるようにしてください（この回答の左側にある緑色のチェックマークをチェックしてください）。 –

2番目のメニューを開いたときに最初のメニューリストを閉じる場合は、これを別に設定する必要がありますか？トグルではなくaddClassを使用しますか？ –

...

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Bootstrap Demo</title> 
     <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('.menu').on("click",function(){ 
       $(this).find(".subMenu").toggle(); 
       $(this).siblings().find(".subMenu").hide(); 
       }); 
      }); 

     </script> 

    </head> 
    <body> 
     <div class="container"> 
      <nav> 
      <ul> 
       <li class="menu "><a href="#">Menu 1</a> 
       <ul class="subMenu"> 
        <li> 
        <a href="">Sub Menu 1</a> 
        </li> 
       </ul> 
       </li> 
       <li class="menu"><a href="#">Menu 2</a> 
       <ul class="subMenu"> 
        <li> 
        <a href="">Sub Menu 1</a> 
        </li> 
        <li> 
        <a href="">Sub Menu 2</a> 
        </li> 
       </ul> 
       </li> 
      </ul> 
      </nav> 
     </div> 
    </body> 
</html>

出典

2016-08-07 05:19:40 Goku

私は何をやっていることは、現在liを重視内のクラス.subMenuと各ulを崩壊するCSSクラス.collapseを定義しています。このスクリプトでは、クラスセレクタを使用してliに関数がバインドされ、クラス.collapseを（追加または削除）ulでトグルします。完璧かつ容易に修正した

$('.menu').keyup(function(e){ 
 
    var keyCode = e.keyCode ? e.keyCode : e.which; 
 
    if(keyCode==13){ 
 
     $(this).find('ul.subMenu').toggleClass('collapse'); 
 
    } 
 
});

.collapse{ 
 
    height:0; 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
<ul> 
 
    <li class="menu" autofocus><a href="#">Menu 1</a> 
 
    <ul class="subMenu"> 
 
     <li> 
 
     <a href="">Sub Menu 1</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="menu"><a href="#">Menu 2</a> 
 
    <ul class="subMenu"> 
 
     <li> 
 
     <a href="">Sub Menu 1</a> 
 
     </li> 
 
     <li> 
 
     <a href="">Sub Menu 2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

出典

2016-08-07 05:28:34 jonju

Toggle Menu個々の入力キーからのリスト

答えて

関連する問題