在锚点击时切换UL的类

Question

我有一个包含以下结构Code Pen Example的菜单：

<ul>
  <li><a href="/">Home</a></li>
  <li>
    <a href="#">Services</a>
    <ul>
      <li><a href="/web-design">Web Design</a></li>
      <li><a href="/print-design">Print Design</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Help</a>
    <ul>
      <li><a href="/by-email">By Email</a></li>
      <li><a href="/by-phone">By Phone</a></li>
    </ul>
  </li>
  <li><a href="/about-us">About Us</a></li>
</ul>

当我点击“服务”或“帮助”时，我想将“下一个UL”的类切换为“打开”，以便显示/隐藏子菜单。

当我打开子菜单时，如果有任何打开，则应关闭另一个子菜单。

我正在使用JQuery。我怎么能这样做？

谢谢你， 米格尔

Answer 1

这样可以解决问题： CodePen

 $("li a").click(function() {
     var element = $(this).next('ul');
     var flag = element.hasClass("open");
     $("li ul").removeClass("open");
     flag ? element.removeClass("open") : element.addClass("open");   
});