jquery - 单击父级时如何使用 jQuery 切换子菜单

Question

我制作了一个下拉垂直菜单，在排除故障后仍然无法弄清楚为什么子菜单切换无法正常工作。我在 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;
}

Answer 1

请将您的脚本更改为此

$("li.menu-item-has-children").click(function(e){
    e.preventDefault();
    $(this).find('.submenu').toggle();
});