twitter-bootstrap 允许点击 twitter bootstrap 下拉切换链接吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12630188/
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
Allow click on twitter bootstrap dropdown toggle link?
提问by Hailwood
We have setup the twitter bootstrap dropdown to work on hover (as opposed to click [yes we are aware of the no hover on touch devices]). But we want to be able to have the main link work when we click it.
我们已经设置了 twitter bootstrap 下拉菜单来处理悬停（而不是点击[是的，我们知道触摸设备上没有悬停]）。但是我们希望能够在我们点击它时让主链接工作。
By default twitter bootstrap blocks it, so how can we re-enable it?
默认情况下，twitter bootstrap 会阻止它，那么我们如何重新启用它呢？
回答by David Spence
Just add disabledas a class on your anchor:
只需在您的锚点上添加disabled作为一个类：
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b></a>
So all together something like:
所以所有的东西都像：
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
回答by Pere
For those of you complaining about "the submenus don't drop down", I solved it this way, which looks clean to me:
对于那些抱怨“子菜单不下拉”的人，我是这样解决的，对我来说看起来很干净：
1) Besides your
1) 除了你的
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown <b class="caret"></b>
</a>
put a new
放一个新的
<a class="dropdown-toggle"><b class="caret"></b></a>
and remove the <b class="caret"></b>tag, so it will look like
并删除<b class="caret"></b>标签，所以它看起来像
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>
2) Style them with the following css rules:
2）使用以下css规则设置它们的样式：
.caret1 {
position: absolute !important; top: 0; right: 0;
}
.dropdown-toggle.disabled {
padding-right: 40px;
}
The style in .caret1 class is for positioning it absolutely inside your li, at the right corner.
.caret1 类中的样式用于将其绝对定位在您的li, 右角。
The second style is for adding some padding to the right of the dropdown to place the caret, preventing overlapping the text of the menu item.
第二种样式是在下拉列表的右侧添加一些填充来放置插入符号，防止菜单项的文本重叠。
Now you have a nice responsive menu item which looks nice both in desktop and mobile versions and that is both clickable and dropdownable depending on whether you click on the text or on the caret.
现在你有一个漂亮的响应式菜单项，它在桌面和移动版本中看起来都不错，并且可以点击和下拉取决于你是点击文本还是插入符号。
回答by kingPuppy
Since there is not really an answer that works (selected answer disables dropdown), or overrides using javascript, here goes.
由于没有真正有效的答案（选定的答案会禁用下拉列表）或使用 javascript 覆盖，所以这里是。
This is all html and css fix (uses two <a>tags):
这是所有的 html 和 css 修复（使用两个<a>标签）：
<ul class="nav">
<li class="dropdown dropdown-li">
<a class="dropdown-link" href="http://google.com">Dropdown</a>
<a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
Now here's the CSS you need.
现在这是您需要的 CSS。
.dropdown-li {
display:inline-block !important;
}
.dropdown-link {
display:inline-block !important;
padding-right:4px !important;
}
.dropdown-caret {
display:inline-block !important;
padding-left:4px !important;
}
Assuming you will want the both <a>tags to highlight on hover of either one, you will also need to override bootstrap, you might play around with the following:
假设您希望两个<a>标签在任何一个悬停时突出显示，您还需要覆盖引导程序，您可以使用以下方法：
.nav > li:hover {
background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
color: black; /*dropdown item text color*/
}
回答by Ken Prince
I'm not sure about the issue for making the top level anchor element a clickable anchor but here's the simplest solution for making desktop views have the hover effect, and mobile views maintaining their click-ability.
我不确定使顶级锚元素成为可点击锚的问题，但这里是使桌面视图具有悬停效果的最简单解决方案，并使移动视图保持其可点击性。
// Medium screens and up only
@media only screen and (min-width: $screen-md-min) {
// Enable menu hover for bootstrap
// dropdown menus
.dropdown:hover .dropdown-menu {
display: block;
}
}
This way the mobile menu still behaves as it should, while the desktop menu will expand on hover instead of on a click.
通过这种方式，移动菜单仍然按其应有的方式运行，而桌面菜单将在悬停时展开而不是单击时展开。
回答by Chuntao Lu
An alternative solution is just to remove the 'dropdown-toggle' class from the anchor. After this clicking will no longer trigger the dropwon.js, so you may want to have the submenu to show on hover.
另一种解决方案是从锚点中删除“下拉切换”类。此点击后将不再触发 dropwon.js，因此您可能希望在悬停时显示子菜单。
回答by Ian
You could use a javascript snippit
你可以使用 javascript snippit
$(function()
{
// Enable drop menu clicks
$(".nav li > a").off();
});
That will unbind the click event preventing url changing.
这将解除单击事件的绑定，防止 url 更改。
回答by Allure Web Solutions
Here's a little hack that switched from data-hover to data-toggle depending the screen width:
这是一个小技巧，根据屏幕宽度从数据悬停切换到数据切换：
/**
* Bootstrap nav menu hack
*/
$(window).on('load', function () {
// On page load
if ($(window).width() < 768) {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
}
// On window resize
$(window).resize(function () {
if ($(window).width() < 768) {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
} else {
$('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
}
});
});
回答by Jorn
This can be done simpler by adding two links, one with text and href and one with the dropdown and caret:
这可以通过添加两个链接来更简单地完成，一个带有 text 和 href ，另一个带有下拉列表和插入符号：
<a href="{{route('posts.index')}}">Posts</a>
<a href="{{route('posts.index')}}" class="dropdown-toggle" data-toggle="dropdown" role="link" aria-haspopup="true" aria- expanded="false"></a>
<ul class="dropdown-menu navbar-inverse bg-inverse">
<li><a href="{{route('posts.create')}}">Create</a></li>
</ul>
Now you click the caret for dropdown and the link as a link. No css or js needed. I use Bootstrap 4 4.0.0-alpha.6, defining the caret is not necessary, it appears without the html.
现在，您单击下拉列表的插入符号并将链接作为链接。不需要 css 或 js。我使用Bootstrap 4 4.0.0-alpha.6，不需要定义插入符号，它没有 html 出现。
