当添加一次仅打开一个子菜单的选项时，它生成了一个错误，即只能始终打开一个子菜单，我不明白原因，我附上了一个测试图像。
enter image description hereenter image description here显示器
正如你可以看到，当一个点击它显示菜单，但如果我再次点击它不关闭，但它再次打开，在图像中，你看到关闭的箭头“”向上箭头，当子菜单打开箭头改变向下“"，我说这是为了显示菜单永远不会关闭的错误。
这是html代码

<nav class='animated flipInX'>
  <ul>
    <li>
      <a href='#'>
        <div class='fa fa-home'></div>
      </a>
    </li>
    <li>
      <a href='#'>
        About
      </a>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Products
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Services
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href='#'>
        Contact Us
      </a>
    </li>
  </ul>
</nav>

This is the js code

$(".sub-menu ul").hide()
$(".sub-menu a").click(function () {
    $(".sub-menu ul").not($(this)).hide();
    $(this).parent(".sub-menu").children("ul").slideToggle("200");
    $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});

'我请求帮助解决这个问题，想法是让你关闭正常的菜单但不改变功能不能同时打开一个以上的菜单。
我尝试了许多jquery选项，但我还不明白错误。