当您单击子 li 时,我遇到了子菜单内子菜单显示的问题。
我遇到的问题是,当您单击子 li 打开子子菜单时,它不会将相关类添加到子子菜单中。这是我正在使用的 jQuery。
$('.menu-item-has-children').on('click', function() {
var submenu = $(this).children('.sub-menu');
if(submenu.hasClass('menu-open')) {
submenu.removeClass('menu-open');
$(this).removeClass('menu-active');
} else {
$('.sub-menu').removeClass('menu-open');
$('li').removeClass('menu-active');
submenu.addClass('menu-open');
$(this).addClass('menu-active');
}
});
我认为这可能与当您单击不同的 li 时尝试从所有“子菜单”类中删除“菜单打开”类有关,但我对如何纠正此问题感到困惑.
这是我的 fiddle 的链接,希望比我能解释的更详细地说明我的问题。
https://jsfiddle.net/08gckq8n/
谢谢。
最佳答案
您遇到的部分问题是您尝试在 li
和所有 .sub- 上运行
位于顶级父on('click')
菜单li
内部。因此,无论您单击何处,您始终会单击父级(最上面的li
),因此您不会获得预期的结果。
您将遇到的另一个问题是,一旦链接生效,您将无法打开这些链接,因为您将导航到该页面,而不是打开子菜单
。
下面的代码使用 toggleClass
简化了 JS,并附加了一个要单击的元素。
var $menu_item = $('.menu-item-has-children');
$menu_item.append('<span class="caret"></span>');
$('.caret').click(function() {
$(this).parent().toggleClass('menu-open');
});
li {
position: relative;
}
li>.caret {
display: inline-block;
position: absolute;
left: 250px;
top: 0;
z-index: 10;
}
.caret::before {
content: '+';
display: block;
width: 25px;
height: 25px;
text-align: center;
font-size: 18px;
}
li.menu-open>.caret::before {
content: '-';
display: block;
}
.sub-menu {
display: none;
position: relative;
}
.menu-open>.sub-menu {
display: block;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="site-navigation">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8 menu-active">
<a href="#">Root Menu Item</a>
<ul class="sub-menu">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68">
<a href="#">Subchild item</a>
</li>
<li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67">
<a href="#">Subchild item</a>
</li>
<li id="menu-item-229" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-229">
<a href="#">Subchild item with submenu</a>
<ul class="sub-menu">
<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66">
<a href="#">Sub-subchild item</a>
</li>
<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65">
<a href="#">Sub-subchild item</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
这是工作 fiddle : https://jsfiddle.net/disinfor/anbau0ya/5/
您必须为 .caret
做一些样式设置,但这将使您更接近您想要做的事情。
您还可以调整 WP 导航菜单的输出以包含插入符
,但这是一个完全不同的问题/解决方案。
关于javascript - WordPress子菜单的子菜单下拉问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48874759/