マルチレベルドロップダウンメニュー項目

このコードを更新して、フォーカスが失われたときにメニュー項目を非表示にする方法。選択してチュートリアルボタンをもう一度クリックすると、すべてのメニュー項目がまだ開いています。マルチレベルドロップダウンメニュー項目

お試しください。

の作業例： https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
    .dropdown-submenu { 
 
     position: relative; 
 
    } 
 
    
 
    .dropdown-submenu .dropdown-menu { 
 
     top: 0; 
 
     left: 100%; 
 
     margin-top: -1px; 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
     
 
    <div class="container"> 
 
     <h2>Multi-Level Dropdowns</h2> 
 
     <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p> 
 
     <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>           
 
     <div class="dropdown"> 
 
     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials 
 
     <span class="caret"></span></button> 
 
     <ul class="dropdown-menu"> 
 
      <li><a tabindex="-1" href="#">HTML</a></li> 
 
      <li><a tabindex="-1" href="#">CSS</a></li> 
 
      <li class="dropdown-submenu"> 
 
      <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
       <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
       <li class="dropdown-submenu"> 
 
       <a class="test" href="#">Another dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">3rd level dropdown</a></li> 
 
        <li><a href="#">3rd level dropdown</a></li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    
 
    
 
    <script> 
 
    $(document).ready(function(){ 
 
     $('.dropdown-submenu a.test').on("click", function(e){ 
 
     $(this).next('ul').toggle(); 
 
     e.stopPropagation(); 
 
     e.preventDefault(); 
 
     }); 
 
    }); 
 
    </script> 
 
    
 
    </body> 
 
    </html>

出典

2017-05-31 Konstantin111

あなたが示す2つの異なる機能をトグルを分割し、UL年代を隠すことができます。次に、hide関数にコードを追加して、すべての子ウルを隠すことができます。このような

何かが、おそらくあなたを助けることができる：

$(document).ready(function(){ 
    $('.dropdown-submenu a.test').on("click", function(e){ 

    if ($(this).next('ul').is(":visible")) { 
     $(this).children().hide(); 
    } else { 
     $(this).next('ul').show(); 
    } 

    e.stopPropagation(); 
    e.preventDefault(); 
    }); 
});

注：私はまだこれをテストしていませんが、私のコードは、エラーが含まれていてもよいので、私は私が考えているものをお見せしたいです。

出典

2017-05-31 17:38:44

マルチレベルドロップダウンメニュー項目

答えて

関連する問題