1

Aと呼ばれるメインドロップダウンのliタグを持つnavbarがあります。ドロップダウンを表示すると、A-1とA-2のオプションが表示され、A-2は他のオプションのドロップダウンです。同様のコードがメインのドロップダウンであっても正しく動作しない場合は、コードが正しく表示されます。hereドロップダウン内のドロップダウン

以下はコードです。

$(document).ready(function() { 
 
    console.log("Hi..."); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default navbar-static-top" id="Nav"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#">APBPV</a> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="dropdown"> 
 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">A <span class="caret"></span></a> 
 
         <ul class="dropdown-menu"> 
 
          <li><a href="#">A-1</a></li> 
 
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">A-2<b class="caret"></b></a> 
 
           <ul class="dropdown-menu"> 
 
            <li><a href="#">A-2-1</a></li> 
 
            <li><a href="#">A-2-2</a></li> 
 
           </ul> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

答えて

2

あなたは仕事に、このためのいくつかのjavascriptが必要になります。ここでは

$(document).ready(function(){ 
    $('a.dropdown-toggle').on("click", function(e){ 
    $(this).closest('li').toggleClass('open'); 
    e.stopPropagation(); 
    e.preventDefault(); 
    }); 
}); 

上記のコードについての説明です:
あなたはそのアンカーをクリックするとドロップダウントグルクラスを持っています(つまり、次のドロップダウンメニューを開くアンカーです)。 - クラスを設定します。open上のli要素(これはnext-menuにopenを指示します)を無効にして、現在の要素のデフォルト動作を防止します。

$(document).ready(function(){ 
 
    $('a.dropdown-toggle').on("click", function(e){ 
 
    $(this).closest('li').toggleClass('open'); 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default navbar-static-top" id="Nav"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#">APBPV</a> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="dropdown"> 
 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">A <span class="caret"></span></a> 
 
         <ul class="dropdown-menu"> 
 
          <li><a href="#">A-1</a></li> 
 
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">A-2<b class="caret"></b></a> 
 
           <ul class="dropdown-menu"> 
 
            <li><a href="#">A-2-1</a></li> 
 
            <li><a href="#">A-2-2</a></li> 
 
           </ul> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

+0

あなたは私の命を救いました!どうもありがとうございます!!! – User1899289003

+0

あなたは大歓迎です:)興味のある方は、このコードに関する説明を追加しました。 – Dekel

+0

ちょうど1つのこと...私は1つを開くと他の両方が開いている場合は、A - 1のような多くの主要なliのタグを持っている場合、最初のものを隠す方法がありますか? – User1899289003

関連する問題