当前位置 : 主页 > 网页制作 > JQuery >

jquery – Bootstrap,WordPress和NavWalker – 顶级导航链接不起作用

来源:互联网 收集:自由互联 发布时间:2021-06-15
我意识到这个问题已经在其他帖子中得到解决,但是,我遇到的问题是顶级导航链接无法在 this site上运行. 这是一个基于BootStrap 3构建的WordPress站点,使用NavWalker将WordPress导航集成到Bootstr
我意识到这个问题已经在其他帖子中得到解决,但是,我遇到的问题是顶级导航链接无法在 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 );

这样可以很好地显示下拉导航,但父菜单项上没有活动链接.

我已经确认父母实际上有活动链接,将他们移出导航层次结构,没有孩子,他们正确显示链接,所以有些东西缺少,我无法识别,并会欣赏一两个敏锐的眼睛来帮助发现它.

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

让父母保留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 : '';
}
网友评论