jQuery 引导下拉顶级导航制作可点击的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16731974/
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 drop down top level navigation make a clickable link
提问by nihilster
I'm using the-bootstrap wordpress theme to create a menu with drop-downs, however the top-level link only reveals the drop-down on clicking & does not go to a page itself when clicked. So in www.thermoryuk.co.uk/wp/ when I click 'Flooring' I want to go to the flooring page as well as revealing the dropdown. Code below, thanks in advance
我正在使用-bootstrap wordpress 主题来创建一个带有下拉菜单的菜单，但是顶级链接仅在单击时显示下拉菜单，并且在单击时不会转到页面本身。因此，在 www.thermoryuk.co.uk/wp/ 中，当我单击“地板”时，我想转到地板页面并显示下拉列表。下面的代码，提前致谢
<nav class="subnav clearfix">
<ul id="menu-product-menu" class="nav nav-pills pull-right">
<li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87 dropdown" data-dropdown="dropdown">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=31" class="dropdown-toggle" data-toggle="dropdown">
Flooring <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88 dropdown-submenu" data-dropdown="dropdown">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=32" class="dropdown-toggle" data-toggle="dropdown">Ash Flooring</a>
<ul class="dropdown-menu">
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=60">Ash Flooring Gallery</a>
</li>
</ul>
</li>
<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=34">Spruce Flooring</a>
</li>
<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=36">Birch Flooring</a>
</li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=38">Pecan Flooring</a>
</li>
</ul>
</li>
</ul>
</nav>
/* ============================================================
* bootstrap-dropdown.js v2.2.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function ($) {
"use strict"; // jshint ;_;
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown
, toggle: function (e) {
var $this = $(this)
, $parent
, isActive
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
$parent.toggleClass('open')
}
$this.focus()
return false
}
, keydown: function (e) {
var $this
, $items
, $active
, $parent
, isActive
, index
if (!/(38|40|27)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider):visible a', $parent)
if (!$items.length) return
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.focus()
}
}
function clearMenus() {
$(toggle).each(function () {
getParent($(this)).removeClass('open')
})
}
function getParent($this) {
var selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
return $parent
}
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
var old = $.fn.dropdown
$.fn.dropdown = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
/* DROPDOWN NO CONFLICT
* ==================== */
$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);
回答by Shafeeque Shaz
You can set that by removing data-toggle="dropdown"from your HTML markup. As an addition to your question we can set the dropdown work on mouseover by setting data-hover="dropdown".
您可以通过data-toggle="dropdown"从 HTML 标记中删除来设置它。作为您问题的补充，我们可以通过设置data-hover="dropdown".
回答by dotty
That's the default behaviour. The nav's are activated by clicks, not hovers. This explains why clicking the anchor, is revealing the submenu instead of following the link.
这是默认行为。导航是通过点击激活的，而不是悬停。这解释了为什么单击锚点会显示子菜单而不是跟随链接。
There's a work around in this SO post.
在这个 SO post 中有一个解决方法。
回答by quardas
We can simply use that code:
我们可以简单地使用该代码：
$('#sub-nav > ul > li > a').click( function() {
location.href = $(this).attr('href');
})
回答by MsMaryMak
I'm looking into this with Bootstrap 3 and was able to make this work on my project by assigning separate links to the text and the caret span:
我正在使用 Bootstrap 3 对此进行研究，并且能够通过为文本和插入符号跨度分配单独的链接来在我的项目中完成这项工作：
<ul class="nav nav-pills nav-stacked left-menu" id="sub-nav">
<li>
<a href="/schools-departments">Schools & Departments</a>
<a href="javascript:void(0);" data-target="#item1" data-toggle="collapse" data-parent="#sub-nav" class="sub-drop"><span class="caret arrow"></span></a>
<ul class="nav nav-stacked collapse left-submenu" id="item1">
<li><a href="#">School of Arts & Sciences</a></li>
<li><a href="#">School of Education & Behavioral Sciences</a></li>
<li><a href="#">School of Health Sciences</a></li>
</ul>
</li>
</ul>
Then added this to the css:
然后将其添加到css中：
#sub-nav li a {
display: inline-block;
}
回答by Jon
A little tweak on what was proposed above. Works to Toggle the dropdown menu and tap again when menu is down to follow the parent link
对上面提出的内容稍作调整。可以切换下拉菜单并在菜单关闭时再次点击以跟随父链接
<script>
function clickMe(obj){
if($(obj).data('clicked') == 'true'){
location.href = $(obj).attr('href');
}
else{
$(obj).data('clicked','true');
}
}
</script>
add some html
添加一些html
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-clicked="false" onclick="clickMe(this);" data-target="#" href="http://www.Add your link here.com">Link#1 <b class="caret"></b></a>
<ul class="dropdown-menu">....your drop down list here
回答by Sean Grünb?ck
I suggest also testing for the body width, so mobile nav keeps working properly. So only set location.href, if the body size is bigger than the breakpoint:
我建议还测试主体宽度，以便移动导航保持正常工作。所以只设置location.href，如果body尺寸大于断点：
$('.navbar-collapse a.dropdown-toggle').click(function() {
if($('body').width() >= "768") {
location.href = $(this).attr('href');
}
});
回答by crispinfox
add this css to your navbar
将此 css 添加到您的导航栏
<style>
ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; margin: 0 }
</style>
and add attribute
并添加属性
onclick="location.href='filename'"
<a href="#" class="dropdown-toggle" onclick="location.href='filename'" data-toggle="dropdown"></a>
回答by Anibal Padilla
Modify A tag like this:
<a class="dropdown-toggle" data-toggle="dropdown" data-clicked="false" onclick="clickMe(this);" data-target="#">On you JS file add:
function clickMe(obj){ if($(obj).data('clicked') == 'true'){ location.href = $(obj).attr('href'); } else { $(obj).data('clicked','true'); } }
像这样修改一个标签：
<a class="dropdown-toggle" data-toggle="dropdown" data-clicked="false" onclick="clickMe(this);" data-target="#">在你的 JS 文件上添加：
function clickMe(obj){ if($(obj).data('clicked') == 'true'){ location.href = $(obj).attr('href'); } else { $(obj).data('clicked','true'); } }
