Изменить содержимое `div` в соответствии с выпадающим списком начальной загрузки

Question

У меня есть панель навигации для загрузки. В которой у меня есть несколько выпадающих элементов.

Теперь у меня есть еще 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, используя ваш код, и я включил jQuery.js внизу, прежде чем включать библиотеку Bootstrap. Как вы можете видеть, выпадающие элементы работают нормально, и, поскольку вы удаляете скрипт 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>