导航栏下拉菜单在引导程序中不起作用
问题描述：
我在导航栏中创建了一个下拉菜单，但当我将其悬停时，它不起作用。导航栏下拉菜单在引导程序中不起作用
我的模板，
<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> My Profile</div>
</a>
</li>
<li>
<a href="/demo/settings">
<div><i class="icon-settings"></i> Settings</div>
</a>
</li>
<li>
<a href="/demo/password">
<div><i class="icon-settings"></i> Change Password</div>
</a>
</li>
<li>
<a href="#">
<div><i class="icon-off"></i> 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>
我创建了一个下拉我来回导航栏菜单，但是当我将鼠标悬停于它，它不工作。
答
首先，您必须使用纯Bootstrap导航栏代码。
然后简单地在下面添加自定义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。
+0
在手机菜单不开放 – mean
+0
它只是定制为桌面版本，而不是为移动。 –
+0
和@Kabali在移动版本的FYI它不工作只是因为jQuery错误列表，如错误地，我只是把Bootstrap.min.js放在jQuery.min.js之上 –
该引导程序Navbar下拉菜单正在处理单击而不是悬停。所以你必须定制你的代码来打开悬停的代码。 –
清理你的代码并创建一个最简单的例子。 – ZimSystem
请创建一个[** JSFiddle **]（https://jsfiddle.net）并学习[**如何创建一个最小，完整和可验证的示例**]（http://stackoverflow.com/help/ mcve） – vivekkupadhyay