在我的导航栏中，我发现JS脚本的切换不像列表看起来那样正确。 我的意思是:如果我点击第二行中的Item2，它会显示一行中的Item，Item3，Item4。 但那是不对的，因为它只能显示物品。 此外，如果我点击Item，它应该只显示ItemX和ItemY，但它也显示了传统的Item3和Item4.。。

我也看到了一个问题，如果你点击其中的一个，父李的完全消失。 所以当你点击第2项时，其他项就消失了（第3项和第4项）。

那么，我怎样才能让正好的孩子李氏敞开心扉，而兄弟李氏不会消失呢？

非常感谢。

null

$('li').on('click', function(e) {
  $(this).children('ul').toggle();
  $(this).siblings('li').find('ul').hide();

  e.stopPropagation();
});

        .sub-menu {
display: none;
}

ul.menu {
    list-style: none;
    width: 100%;
    background-color: #224490;
}

li {
    display:inline-block;
    cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
      <li >Item
        <ul class="sub-menu">
          <!--This works fine-->
          <li>Item2
            <ul class="nested sub-menu">
              <!--Here is the problem-->
              <li>Item
                <ul class="nested sub-menu">
                  <!--Here is the problem too-->
                  <li>ItemX</li>
                  <li>ItemY</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
              Item3
          </li>
          <li>
              Item4
          </li>
        </ul>
      </li>
</ul>
      <ul>
       <li >
            <table>
              <tr>
                <th>Month</th>
                <th>Savings</th>
                <th>Infos</th>
              </tr>

            </table>

      </li>
</ul>

null