<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
新的引导程序。这是基于Bootstrap示例的代码。现在，下拉列表显示但您无法单击下拉列表本身。我希望能够使所有父导航链接工作。与本网站类似：https://eastcfashion.com/
点击例如：男士系列带您进入该区域的所有收藏。但是下拉菜单中，您可以继续使用特定项目。
我试图以主父导航会说项目的方式实现它。项目的下拉菜单会显示每个项目的特定页面，如项目1，项目2等。但是单击项目会将您带到项目1，项目2和项目集合将作为一组显示的页面而不是单独的。
jQuery(function($) {
if ($(window).width() > 769) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function() {
location.href = this.href;
});
}
});@media only screen and (min-width:769px) {
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative !important;
}
.dropdown-submenu>.dropdown-menu {
top: 0 !important;
left: 100% !important;
margin-top: -6px !important;
margin-left: -1px !important;
border-radius: 0 !important;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block !important;
}
.dropdown-submenu>a:after {
display: block;
content: "\f105";
font-family: 'FontAwesome';
margin-top: -18px;
right: 15px;
position: absolute;
font-weight: 300;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li><li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>我接受了Joe的回答并根据我的需要对其进行了改进
/*
* Only go to the link when dropdown is already open (if the dropdown is a link)
*/
$('.navbar ul.navbar-nav > .dropdown > a[href]').click(function() {
var dropdown = $(this).next('.dropdown-menu');
/*
* The dropdown can be non-existent
* The dropdown can be already open by css
* (for instance display: block from a custom :hover setting)
* or a "show" class on the element which also sets a display: block;
*/
if (dropdown.length == 0 || $(dropdown).css('display') !== 'none') {
if (this.href) {
location.href = this.href;
}
}
});
Bootstrap 4 html就是这样
<header class="navbar">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" href="/planning" data-toggle="dropdown">
Planning
</a>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a href="/day-planning">Day planning</a>
</li>
</ul>
</li>
</ul>
</header>
我试着保持代码简单。我的解决方案是检测下拉按钮/链接上的第二次单击，然后按照此处的链接进行操作。
$('.navbar .dropdown > a').click(function() {
if (!$(this).hasClass("parent-clicked")) {
$(this).addClass("parent-clicked");
} else {
location.href = this.href;
}
});
这也适用于折叠视图。
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
此代码段切换下拉菜单，但点击事件和href用于切换下拉菜单。所以根据您的需要 -
将href重定向到常规项目页面并添加悬停事件以使用jquery或CSS显示下拉菜单。要显示Dropdown菜单，只需将开放类添加到<li class="nav-item dropdown">