Bootstrap：如何使下拉导航的父链接成为活动链接？

Question

Bootstrap：如何使下拉导航的父链接成为活动链接？

wordpresstwitter-bootstraptwitter-bootstrap-3navigation

14

我在WordPress网站上运行Bootstrap，但是遇到了一个问题，即父级下拉导航项的URL被剥离。

以下是代码。在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>

这里缺少什么让它不能工作？我已确认该项与有效条目关联。

- forrest

7个回答

36

对于我而言，这样做起作用了：我假设您使用wp-bootstrap-navwalker。

使用编辑器打开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 : '';
}

将这段代码更改为：

// 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 : '';
}

注意：$att['href']现在已启用，而$atts['data-toggle']已禁用，这使得父链接可以被点击。

现在打开你的style.css并添加下面这段代码，以激活带有下拉菜单和可点击父级的WordPress菜单的hover功能。

.dropdown:hover .dropdown-menu {
    display: block;
}

注意：菜单在小屏幕设备上的行为会略有变化。无需额外的 jQuery。

- Sohail Qureshi

2

这正是我在寻找的确切答案。 - kamalo

1

太棒了，非常感谢 :) - atif

有没有针对小型设备的已知解决方案？ - atif

1

你也可以将 $atts['data-toggle'] = 'dropdown' 更改为 $atts['data-hover'] = 'dropdown'。在这种情况下，您不需要更改CSS中的任何内容。 - teninchhero

谢谢，如果没有 PHP 知识，我自己永远也想不到这个。对于那些将使用搜索查找该行代码的人，在我的情况下，它是 $this->has_children 而不是 $args->has_children。 - Limpuls

显示剩余2条评论

11

您可以通过移除data-toggle="dropdown"并设置data-hover="dropdown"来进行设置。

- ksg

感谢您的输入。 - forrest

4

2018年5月，这个解决方案对我起作用了。

打开class-wp-bootstrap-navwalker.php文件 -> 注释掉第185行

// $atts['href']          = '#';

并粘贴此代码。

$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['data-toggle']   = 'hover';

享受。

- Amir Ur Rehman

4

为了补充Sohail Qureshi的解决方案，我对文件进行了一些修改，并且这里有一种将父链接转换为实际链接的方法：

在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 : '';
    }

现在父链接可以被点击，并且实际上链接到页面！

- user5890887

-1

// 哇！！！这段代码运行正常。只需将其粘贴到项目的正确位置即可。 // 如果item有子项，则将atts添加到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 : '';
}

- Mazedul Islam

如果现有答案有帮助，请在其下添加评论，无需根据其片段创建新答案。 - Hexfire

-1

使用以下代码轻松实现下拉菜单中的可点击链接

onClick="parent.location='http://www.plus2net.com/'"

- SantoshK

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gigelsmith · Accepted Answer

默认情况下，Bootstrap下拉菜单中的父级项目是不可点击的。将此脚本添加到您的页面中，现在它们将可被点击：

<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>

此解决方案的功劳归于http://wpeden.com/tipsntuts/twitter-bootstrap-dropdown-on-hover-and-activating-click-event-on-parent-item/