我做了一个下拉式垂直菜单,在进行故障排除后仍然无法弄清为什么子菜单切换无法正常工作。我将CSS子菜单设置为最初隐藏它,当单击父列表项时,我希望jQuery进行切换。当前,浏览器控制台中没有错误,但是切换无法正常进行。
任何帮助将不胜感激。谢谢!
Jquery:
$("li.menu-item-has-children .toggle").click(function(e){
e.preventDefault();
$(this).next('.submenu').toggle();
});
HTML
<nav class="navigation">
<ul class="menu nav-menu">
<li class="menu-item menu-item-has-children"><a href="#" class="menu-link main-menu-link">Logo
<span class="toggle">
<i class="fas fa-chevron-right"></i>
</span>
</a>
<ul class="submenu">
<li>sub list</li>
</ul>
</li>
<li class="menu-item menu-item-has-children"><a href="#" class="menu-link main-menu-link">Fonts
<span class="toggle">
<i class="fas fa-chevron-right"></i>
</span>
</a></li>
</ul>
</nav>
CSS:
.nav-menu li.menu-item-has-children {
position: relative;
}
.nav-menu li a{
color: #0a0a0a;
display: block;
font-weight: 400;
position: relative;
padding: 10px 40px 10px 20px;
font-size: .875rem;
line-height: 1.25rem;
}
.nav-menu li.menu-item-has-children .toggle {
position:absolute;
right:0;
transition: transform 400ms cubic-bezier(1,0,1,1),-webkit-transform 400ms cubic-bezier(1,0,1,1),-o-transform 400ms cubic-bezier(1,0,1,1);
}
.submenu{
display:none;
}
请将该脚本更改为此
$("li.menu-item-has-children").click(function(e){
e.preventDefault();
$(this).find('.submenu').toggle();
});