wordpress Bootstrap：如何使下拉导航父链接成为活动链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25692514/
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: How do I make Dropdown navigation Parent links an active link?
提问by forrest
I am running Bootstrap on a WP install and have an issue with the url being stripped from the parent drop down nav item.
我在 WP 安装上运行 Bootstrap，并且从父下拉导航项中删除了 url 的问题。
Here is the code. In menu-item-72you can see that the href for our-team is just a # instead of a proper link.
这是代码。在menu-item-72 中，您可以看到 our-team 的 href 只是一个 # 而不是正确的链接。
<ul id="menu-primary" class="nav navbar-nav">
<li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-69"><a title="Home" href="http://mostellar.opteradev.com/">Home</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-70 active"><a title="About Us" href="http://mostellar.opteradev.com/us/">About Us</a></li>
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-72 dropdown"><a title="Our Team" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Our Team <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a title="Katherine M. Conwell, CPA" href="http://mostellar.opteradev.com/katherine-m-conwell/">Katherine M. Conwell, CPA</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a title="Ann S. Bowers, CPA" href="http://mostellar.opteradev.com/our-team/ann-s-bowers/">Ann S. Bowers, CPA</a></li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a title="John B. Mostellar, CPA" href="http://mostellar.opteradev.com/our-team/john-b-mostellar/">John B. Mostellar, CPA</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a title="Lewis T. Shreve, CPA" href="http://mostellar.opteradev.com/our-team/lewis-t-shreve/">Lewis T. Shreve, CPA</a></li>
</ul>
</li>
</ul>
What is missing from this to make it work? I have confirmed that the item is associated with an active entry.
这其中缺少什么才能使其发挥作用？我已确认该项目与活动条目相关联。
回答by gigelsmith
By default bootstrap parent items on a dropdown are not clickable. Add this script to your page and now they will be:
默认情况下，下拉列表中的引导父项不可点击。将此脚本添加到您的页面，现在它们将是：
<script>
jQuery(function($) {
$('.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;
});
});
</script>
Credit for this solution goes to http://wpeden.com/tipsntuts/twitter-bootstrap-dropdown-on-hover-and-activating-click-event-on-parent-item/
回答by Sohail Qureshi
For me it worked this way: I assume you make usage of the wp-bootstrap-navwalker
对我来说它是这样工作的：我假设你使用了 wp-bootstrap-navwalker
Open up the wp-bootstrap-navwalker.php with your editor and look up for line approx.
用你的编辑器打开 wp-bootstrap-navwalker.php 并查找大约行。
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
Change this piece of code to:
把这段代码改成：
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
//$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
Note: $att['href'] is enabled now, the the $atts['data-toggle'] is disabled which makes the parent link clickable.
注意：$att['href'] 现在已启用，$atts['data-toggle'] 已禁用，这使得父链接可点击。
Now open up your style.css and add this piece of code to activate the hover function for your WordPress menu with dropdown and clickable parent.
现在打开你的 style.css 并添加这段代码来激活带有下拉菜单和可点击父级的 WordPress 菜单的悬停功能。
.dropdown:hover .dropdown-menu {
display: block;
}Note: The behaviour of the menu will change slightly on small devices with small screens. No additional jQuery required.
注意：菜单的行为在小屏幕的小设备上会略有变化。不需要额外的 jQuery。
回答by ksg
You can set that by removing data-toggle="dropdown" and setting data-hover="dropdown".
您可以通过删除 data-toggle="dropdown" 并设置 data-hover="dropdown" 来设置它。
回答by user5890887
To add on to Sohail Qureshi's solution, I modified the file a bit more, and here's a way that converts the parent link to an actual link:
为了添加 Sohail Qureshi 的解决方案，我对文件进行了更多修改，这是一种将父链接转换为实际链接的方法：
in wp-bootstrap-navwalker.php, change this piece of code:
在 wp-bootstrap-navwalker.php 中，更改这段代码：
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
to:
到：
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = ( $item->url );
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle disabled';
$atts['aria-haspopup'] = 'true';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
and now the parent link is clickable and actually link to page!
现在父链接是可点击的，实际上链接到页面！
回答by Amir Ur Rehman
May 2018 this solution worked for me.
2018 年 5 月，此解决方案对我有用。
Go to your class-wp-bootstrap-navwalker.php file -> comment line 185
转到您的 class-wp-bootstrap-navwalker.php 文件 -> 注释行 185
// $atts['href'] = '#';
And paste this code.
并粘贴此代码。
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['data-toggle'] = 'hover';
Enjoy.
享受。
回答by SantoshK
Easy to use below code for clickable link in drapdown
以下代码易于使用，可在下拉菜单中单击链接
onClick="parent.location='http://www.plus2net.com/'"
回答by Mazedul Islam
// Wow!!! This code is working properly. Just paste it into the right place on your project. // If item has_children add atts to a.
// 哇！！！此代码工作正常。只需将其粘贴到项目的正确位置即可。// 如果 item has_children 添加 att 到 a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
//$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
