WordPress 中的引导菜单集成与导航步行器 (:hover)答案

【问题标题】：Bootstrap menu integration in WordPress with nav walker (:hover)WordPress 中的引导菜单集成与导航步行器 (:hover)
【发布时间】：2014-03-02 13:10:03
【问题描述】：

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

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

问题是，如果我使用这种结构为 WooCommerce 创建一个页面：

~>店铺

~~> 我的账号

~~~> 退出

唯一有效的链接是“注销”（第 3 级菜单）。所有其他人将被删除。好吧，但我已经让我的菜单显示在 :hover 上。

所以问题是如何禁用点击功能（我不知道如何更好地解释它）。这是在悬停时进行引导的代码：

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);
});

我尝试了一切来禁用单击事件（event.preventDefault() .. 等），但它仍然会在悬停时打开菜单，当您单击带有子菜单的链接时，它会添加一个活动类并且什么都不做。所以高级菜单还不能使用。

PS：这是 nav walker 的最新版本，因此它会删除链接，但这并不是真正的问题，即使使用旧版本也会破坏它。

【问题讨论】：

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

当我为 Bootstrap 3 构建 wp_bootstrap_navwalker 时，它的构建是为了符合引导程序的限制，即父项没有关联的 URL，并且它只支持一级下拉菜单。 Bootstrap 2.3.2 (https://github.com/twittem/wp-bootstrap-navwalker/tree/For-Bootstrap-2.3.2) 的 walker 支持几乎无限的下拉菜单，但也不附加到父项的链接。

通常在这种情况下，如果您正在构建响应式网站并且多级下拉菜单在移动设备上几乎总是被破坏，我建议您重新考虑菜单结构。也就是说，我打算在本周末发布更可配置的 walker 版本。

至于你的问题，我不清楚你的目标是什么，如果你能把它说得更清楚一点，我很乐意帮助你。

【讨论】：

【解决方案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;
}

【讨论】：