Question

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

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

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

〜＆GT;购物

~~＆GT;我的帐户

~~~＆GT;注销

唯一可行的链接是＆＃39;退出＆＃39; （第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：这是导航助行器的最新版本，因此它删除了链接，但这并不是一个问题，即使使用旧版本也是如此。

Answer 1

当我为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支持几乎无限的下拉，但也没有附加到父项的链接。

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

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

Answer 2

/* 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;
}

WordPress中的Bootstrap菜单集成与nav walker（：hover）

2 个答案: