WordPress中的Bootstrap菜单集成与nav walker(:hover)

时间:2014-03-02 13:10:03

标签: jquery html css wordpress twitter-bootstrap

基本上没有问题,但我想添加一个功能。它按照预期的那样工作。 我正在使用Edward McIntyre的 wp_bootstrap_navwalker

https://github.com/twittem/wp-bootstrap-navwalker

问题是如果我为这个结构的WooCommerce创建一个页面:

  
    
        
  • 〜>购物
  •     
  • ~~>我的帐户
  •     
  • ~~~>注销
  •     
  

唯一可行的链接是'退出' (第3级菜单)。所有其他人将被删除。 那很好但是我已经让我的菜单出现了:悬停。

所以问题是如何禁用点击功能(我不知道如何更好地解释它)。以下是在悬停时启动引导程序的代码:

var slideDuration;
slideDuration = 100;
jQuery('.ddmenu li.dropdown').hover(function () {
    jQuery(this).children('.dropdown-menu').stop(true, true).delay(100).fadeIn({ duration: slideDuration, queue: false }).css('display', 'none').slideDown(slideDuration);
}, function () {
    jQuery(this).children('.dropdown-menu').stop(true, true).delay(200).fadeOut({ duration: slideDuration, queue: false }).slideUp(slideDuration);
});

我尝试了所有内容来禁用click事件(event.preventDefault()..等),但它仍然会在悬停时打开菜单,当您单击带有子菜单的链接时,它会添加一个活动类并且不执行任何操作。因此,较高的菜单尚无法使用。

PS:这是导航助行器的最新版本,因此它删除了链接,但这并不是一个问题,即使使用旧版本也是如此。

2 个答案:

答案 0 :(得分:0)

当我为Bootstrap 3构建wp_bootstrap_navwalker时,它的构建符合bootstraps限制,其中父项没有关联的URL,它只支持一个级别的下拉列表。 Bootstrap 2.3.2(https://github.com/twittem/wp-bootstrap-navwalker/tree/For-Bootstrap-2.3.2)的walker支持几乎无限的下拉,但也没有附加到父项的链接。

通常在这种情况下,如果您要构建响应式网站,我建议重新考虑菜单结构,并且多级下拉列表几乎总是在移动设备上中断。这就是说我打算本周末发布一个更可配置的助行器版本。

关于你的问题,我不清楚你想要达到的目标,如果你能更清楚地说明一下,我会很乐意帮助你。

答案 1 :(得分:0)

/* dropdown */
.dropdown-menu {
    margin: 0px auto;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.dropdown-menu .dropdown-menu {
    left: 100%;
    top: 0px;
}
/*  shows the dropdown on hover*/
.navbar ul.nav li:hover > ul.dropdown-menu {
    display: block;   
}
/* before and after */
.navbar .nav > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu::after {
    display: none;
}