Bootstrap、WordPress 和 NavWalker - ***导航链接不起作用

Posted 2023-04-13

【中文标题】Bootstrap、WordPress 和 NavWalker - ***导航链接不起作用

【英文标题】：Bootstrap, WordPress & NavWalker - Top Level Nav Links not working

【发布时间】：2014-12-24 01:30:03

【问题描述】：

我知道这个问题已经在其他帖子中得到解决，但是，我遇到了顶部导航链接在 this site 上不起作用的问题。

这是一个基于 BootStrap 3 构建的 WordPress 站点，使用 NavWalker 将 WordPress 导航集成到 Bootstrap 结构中。这是导航代码：

 <div class="navbar navbar-default col-md-9" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>
        <?php
                        wp_nav_menu( array(
                        'menu'                    => 'Primary',
                        'theme_location'    => 'Primary',
                        'depth'                   => 2,
                        'container'             => 'div',
                        'container_class'    => 'collapse navbar-collapse col-md-9',
                        'container_id'        => 'none',
                        'menu_class'         => 'nav navbar-nav',
                        'fallback_cb'         => 'wp_bootstrap_navwalker::fallback',
                        'walker'                => new wp_bootstrap_navwalker())
                        );
                    ?> 
        </div><!-- /.container -->
</div><!-- /.navbar -->

这本质上缺乏下拉菜单上的悬停功能。我已经通过wpeden 的以下解决方案解决了这个问题：

( function( $ ) 
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;
);

);
 )( jQuery );

这在优雅地显示下拉导航方面做得非常好，但父菜单项上没有活动链接。

我已经确认父级实际上具有活动链接，方法是将它们移出导航层次结构，没有子级正确显示链接，因此缺少一些我无法识别的东西，希望有敏锐的眼光或两个来帮助发现它。

【问题讨论】：

活跃链接是什么意思？我看到菜单直接加载了href="#"

嗨 Spokey，这就是问题所在。有些东西正在剥离链接，我留下了#作为链接。如上所述，如果我将导航元素移动到没有子元素的位置，如联系人，则链接会正确显示。但是一旦它有了孩子，链接就会被删除。

【参考方案1】：

NavWalker 似乎就是这样设计的。您需要在 wp_bootstrap_navwalker.php 的 #85 行编辑源代码。

让父母保留href，即使它有孩子

if ( $args->has_children && $depth === 0 ) 
    // $atts['href']        = '#'; // old line
    $atts['href'] = ! empty( $item->url ) ? $item->url : ''; // new line
    $atts['data-toggle']    = 'dropdown';
    $atts['class']          = 'dropdown-toggle';
    $atts['aria-haspopup']  = 'true';
 else 
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';

【讨论】：

它刚刚经过我的测试并且运行良好。感谢您的帮助！

这适用于桌面，但移动版菜单无法正常工作，因为我们删除了下拉切换

没有解决我的问题，当我将鼠标悬停在项目上时，会出现链接.. 但它仍然不可点击，它只会导致下拉列表展开和折叠，有什么建议吗？谢谢