javascript Bootstrap 4 - 使下拉列表的父级保持可点击的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48820404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 - Keeping Parent of Dropdown a clickable link
提问by dp_chua
<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>
New to bootstrap. Here's the code based on the Bootstrap example. Right now the dropdown shows up but you're not able to click on the dropdown itself. I want to be able to make all the parent nav links work. Similar to this website: https://eastcfashion.com/
新手引导。这是基于 Bootstrap 示例的代码。现在下拉列表显示出来，但您无法单击下拉列表本身。我希望能够使所有父导航链接正常工作。类似本网站：https: //eastcfashion.com/
Where clicking on for example: men's collection brings you to all the collection for that area. But the dropdown menu, you're able to just go on specific items.
例如，单击男士系列将带您进入该区域的所有系列。但是在下拉菜单中，您可以选择特定项目。
I'm trying to implement it in a way that the main parent nav would say Projects. and the dropdown menu for projects would show specific pages for each project like project 1, project 2, etc. But clicking on Projects would take you to a page where project 1, project 2, and the collection of projects would be showing as a group and not individually.
我试图以一种主要的父级导航会说项目的方式来实现它。项目的下拉菜单将显示每个项目的特定页面，如项目 1、项目 2 等。但单击项目会将您带到项目 1、项目 2 和项目集合将显示为一组的页面而不是个别。
回答by HTML Guruz
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>回答by Joe
I tried to keep the code simple. My solution is to detect the second click on the dropdown button/link and follow the link at that point.
我试图保持代码简单。我的解决方案是检测下拉按钮/链接上的第二次点击，然后点击该链接。
$('.navbar .dropdown > a').click(function() {
if (!$(this).hasClass("parent-clicked")) {
$(this).addClass("parent-clicked");
} else {
location.href = this.href;
}
});
This works in the collapsed view as well.
这也适用于折叠视图。
回答by Julesezaar
I took Joe's answer and improved it to my needs
我接受了乔的回答并根据我的需要对其进行了改进
/*
* 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;
}
}
});
The Bootstrap 4 html for this is
用于此的 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>
回答by passwortknacker
The easiest way to do it is by deleting the "data-toggle" attribute from the parent element! edit: thx for the tip, here is a code example: I changed this:
最简单的方法是从父元素中删除“data-toggle”属性！编辑：感谢提示，这里是一个代码示例：我改变了这个：
<a class="p-2 text-dark dropdown-toggle" data-toggle="dropdown" style="font-size:1.25rem;" href= {% url 'link' %}>Link</a>
to this:
对此：
<a class="p-2 text-dark dropdown-toggle" style="font-size:1.25rem;" href= {% url 'link' %}>Link</a>
so, in essence, I simply deleted the data toggle attribute and thus converted a hoverable dropdown into a hoverable dropdown with a clickable parent link.
因此，本质上，我只是删除了数据切换属性，从而将可悬停的下拉列表转换为带有可点击父链接的可悬停的下拉列表。
回答by vishugosain
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
This snippet toggles the dropdown but on click event and href is used to toggle the dropdown menu. So According to your need -
此代码段切换下拉菜单，但在单击事件时使用 href 切换下拉菜单。所以根据你的需要 -
Redirect href to the general project page and add hover event to display the dropdown menu using jquery or CSS.To display the Dropdown menu just add open class to <li class="nav-item dropdown">
将 href 重定向到一般项目页面并添加悬停事件以使用 jquery 或 CSS 显示下拉菜单。要显示下拉菜单，只需将打开的类添加到 <li class="nav-item dropdown">
