ブートストラップでNavbarドロップダウンが機能しません

Question

私のnavbarからドロップダウンメニューを作成しましたが、その上にマウスを置くと機能しません。

マイテンプレート、

<header id="header" class="sticky-header" data-sticky-class="not-dark" > 

     <div id="header-wrap"> 

      <div class="container clearfix"> 
       <div class="divcenter" style="max-width:990px;"> 
        <div id="primary-menu-trigger"><i class="icon-reorder"></i></div> 

        <!-- Logo 
       ============================================= --> 
        <div id="logo" style="margin-top: 5px;"> 
         <a href="#" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="assets/images/SW-Logo-Final.png" alt="Canvas Logo"></a> 


        </div> 
        <span class="inputgroupcss col-sm-5" style="padding-top:12px;"> 


            <input type="email" (keyup)="submit(button1.value)" #button1 class="form-control required email" placeholder="Search by Name or Email" 
             style="height:38px;"> 

           <div class="col-sm-12 nopadding "> 

           <ul class="searchlist"> 
            <li *ngFor="let detail of details"> 
             <img [src]='detail.image' alt="profile_image" style="width: 35px; 
          height: 35px;"> 
             <a (click)="redirect()" [routerLink]="['/demo/user',detail.profilename]">{{detail.profilename}}</a> 
            </li> 

           </ul>  
          </div> 


         </span> 

        <!-- #logo end --> 

         <!-- Primary Navigation 
        ============================================= --> 
          <!-- <nav id="primary-menu" class="pull-left" style="margin-top:11px"> 
        <form style="width:300px" id="widget-subscribe-form2" action="include/subscribe.php" role="form" method="post" class="nobottommargin"> 
          <div class="input-group input-group-lg divcenter" style="max-width:600px;"> 
          <input type="email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Search by Name or Email" style="height:38px;"> 
          <span class="input-group-addon" style="height: 38px;padding: 6px 16px;"><i class="icon-line-search"></i></span> 
         </div> 
        </form>  <div *ngFor="let id of ids" class = "nopadding col-sm-12"> 
     <button class="badge notification" (click) = 'getRequests()'> 
     <span class="glyphicon glyphicon-bell"></span> 
</button> 
     <span class="noti"> {{id.sent_id}}</span>  
</div> 
       </nav> --> 
        <nav id="primary-menu" class="dark"> 

         <ul> 
          <li class="onhovercolor"> 
           <a href="#"> 
            <div>srilatha mattepu</div> 
           </a> 
          </li> 
          <li id="top-cart" class="onhovercolor notopmargin noleftpadding" *ngFor="let id of ids"><a href="#" class="noleftpadding" id="top-cart-trigger"><i class="icon-email3" style="font-size:18px;color: #d35b29;"></i><span>{{id.sent_id}}</span></a> 
           <div class="top-cart-content"> 
            <div class="top-cart-title"> 
             <h6 class="nobottommargin text-center">You have {{id.sent_id}} Requests pending</h6> 
            </div> 
            <div class="col-xs-12 dropdownpanel"> 
             <h6 class="nobottommargin">Friend Requests</h6> 
            </div> 
            <div class="col-xs-12 dropdownpanel"> 
             <div class="col-xs-3 nopadding"> 
              <img src="assets/images/gallery3.png" style="height:45px;width:50px"> 
             </div> 
             <div class="col-xs-6 nopadding"> 
              <h5 class="nobottommargin pendingnamescss">srilatha mattepu</h5> 
             </div> 
             <div class="col-xs-3 nopadding text-right"> 
              <a href="#" class="norightmargin button buttonwarning button-mini button-aqua" style="width:auto !important;">pending</a> 
             </div> 
            </div> 
            <div class="col-xs-12 dropdownpanel"> 
             <div class="col-xs-3 nopadding"> 
              <img src="assets/images/gallery3.png" style="height:45px;width:50px"> 
             </div> 
             <div class="col-xs-6 nopadding"> 
              <h5 class="nobottommargin requestsnamecss">srilatha mattepu</h5> 
             </div> 
             <div class="col-xs-3 nopadding text-right"> 
              <a href="#" class="norightmargin button buttonwarning button-mini button-aqua" style="width:auto !important;">pending</a> 
             </div> 
            </div> 


           </div> 
          </li> 

          <li class="onhovercolor norightpadding"> 

            <div class="downarrowcss"><i class="icon-caret-down" style="font-size:25px !important"></i></div> 

           <ul class="menu-pos-invert"> 
            <li> 
             <a href="/demo/profile"> 
              <div><i class="icon-user"></i>&nbsp;&nbsp;My Profile</div> 
             </a> 
            </li> 
            <li> 
             <a href="/demo/settings"> 
              <div><i class="icon-settings"></i>&nbsp;&nbsp;Settings</div> 
             </a> 
            </li> 
            <li> 
             <a href="/demo/password"> 
              <div><i class="icon-settings"></i>&nbsp;&nbsp;Change Password</div> 
             </a> 
            </li> 
            <li> 
             <a href="#"> 
              <div><i class="icon-off"></i>&nbsp;&nbsp;Logout</div> 
             </a> 
            </li> 

           </ul> 
          </li> 
          <li class="onhovercolor hidden-sm hidden-md visible-xs"> 
           <a href="#"> 
            <div>srilatha mattepu</div> 
           </a> 
           <ul> 
            <li><a href="/demo/profile">PROFILE</a></li> 
            <li><a href="/demo/social">SOCIAL ADDRESSES</a></li> 
            <li class="list-borbtom"><a href="/demo/custom">CUSTOM INFO</a></li> 
            <li><a href="/demo/society">MY SOCIETY<span>(ALL)</span></a></li> 
            <ul class="left-sub-list"> 
             <li><a href="/demo/personal" style="padding-left:15px" href="#">PERSONAL</a></li> 
             <li><a href="/demo/professional" style="padding-left:15px" href="#">PROFESSIONAL</a></li> 
            </ul> 
            <li><a href="/demo/requests">REQUESTS</a></li> 
            <li><a href="/demo/society">MESSAGES</a></li> 
            <li class="list-borbtom"><a href="/demo/society">SOCIETY UPDATES</a></li> 
            <li class="list-borbtom"><a href="/demo/search">SEARCH</a></li> 
            <li class="list-borbtom"><a href="/demo/password">PASSWORD</a></li> 
            <li><a href="/demo/settings">SETTINGS</a></li> 
            <li><a href="#" style="color:#ce5a2b;">LOGOUT</a></li> 
            <li><a href="#" style="color:#ce5a2b;">Qr Code</a></li> 
           </ul> 
          </li> 


         </ul> 
        </nav> 
        <!-- #primary-menu end --> 

       </div> 

      </div> 

     </div> 

    </header> 

私は私のナビゲーションバーあちこちにドロップダウンメニューを作成したが、私はそれの上に置くと、それが機能していません。

Answer 1

まず、純粋なブートストラップNavbarコードを使用する必要があります。

カスタムjQueryを追加して、マジックを参照すると、親メニューのリンクホバーのホバーにドロップダウンが表示されます。

$('ul.nav li.dropdown').hover(function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
}, function() { 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
}); 

fiddle接続を確認してください。