ブートストラップのドロップダウンアイテムごとに `div`の内容を変更します

Question

私はブートストラップのナビゲーションバーを持っています。私は複数のドロップダウンアイテムを持っています。

もう1つdivcol-md-3です。

このdivには、私がカーソルを置いたドロップダウンの項目が表示されます。今のところ、ドロップダウンにカーソルを合わせると、クリックする代わりにサブメニューが表示されます。

どのようにして、そのdivのドロップダウンメニューのサブ項目を表示できますか？

サブアイテムがドロップダウンリストにあり、サイドバーdivにも追加したいと考えています。

私のコードは次のようである：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Dashboard</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Administration <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Time Zone</a></li> 
        <li><a href="#">Holidays</a></li> 
        <li><a href="#">Working Hours</a></li> 
        <li><a href="#"> Promt Language</a></li> 
        <li><a href="#">Phone No Allocation & Extensions</a></li> 
        <li><a href="#">Speed Dial</a></li> 
        <li><a href="#">Confernce Welcome Message</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dial Plan<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Current Dial Plan</a></li> 

        <li><a href="#">Caller ID Management</a></li> 
        <li><a href="#">ISD Management</a></li> 
        <li><a href="#">Block Number</a></li> 
        <li><a href="#">Override</a></li> 
        <li><a href="#">Location</a></li> 
       </ul> 

      </li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Routing<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">24 Hours</a></li> 
        <li><a href="#">Working Hours</a></li> 
        <li><a href="#">OFF Hours</a></li> 
        <li><a href="#"> Location Based Routing </a></li> 
       </ul> 

      </li> 
      <li><a href="#">Call Recording</a></li> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Users <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Add User</a></li> 
        <li><a href="#">View Users</a></li> 
       </ul> 
      </li> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Voice Mail<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Default</a></li> 
        <li><a href="#">For each user</a></li> 
       </ul> 
      </li> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Provisioning <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Manual Softphone Configuration</a></li> 
        <li><a href="#">Add Deskphone</a></li> 
        <li><a href="#">Devices</a></li> 
        <li><a href="#">Edit</a></li> 
        <li><a href="#">Delete</a></li> 

       </ul> 
      </li> 

     </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 


<div class="container-fluid"> 
      <div class="col-md-12" > 
      <!-- Side bar--> 
       <div class="col-md-3"> 

       </div> 

      </div> 
</div> 

Answer 1

あなたのコードが正しい、しかし、あなたのコード内でのjQueryを含めるのを忘れているようです。 あなたのコードを使ってCodepenを作成しました.Bootstrapライブラリを含める直前に、jQuery.jsを一番下に含めました。 ドロップダウン項目は正常に動作しています。コードからjQueryスクリプトを削除すると、壊れたシナリオを再現できます。あなたのjqueryのコードはCodepen Link

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>