基本上没有问题,但我想添加一个功能。它按照预期的那样工作。 我正在使用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:这是导航助行器的最新版本,因此它删除了链接,但这并不是一个问题,即使使用旧版本也是如此。
答案 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;
}