【发布时间】: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,这就是问题所在。有些东西正在剥离链接,我留下了#作为链接。如上所述,如果我将导航元素移动到没有子元素的位置,如联系人,则链接会正确显示。但是一旦它有了孩子,链接就会被删除。
标签: jquery wordpress twitter-bootstrap-3 navigation