我有一个菜单，它从 MySQL 表和 PHP 填充到一些嵌套的子级别。 我的菜单如下：

A
B
C

如果第一次单击 A，它会显示所有子元素，再次单击 A 的子元素，它也会正常显示子元素。
但问题是，当我打开 A 的所有级别项目后单击 B 时，它会正常显示 B 子元素。但如果我再次单击 A，它也会显示除子子元素之外的所有元素。

我为此使用了 jQuery。

那么我想恢复到原始状态吗？（仅展开顶部子元素，而不是子子元素），
如何做到这一点？

//this is my jquery code for elements clickable in menu.
$(document).ready(function() {
  $(".lichild").parent().hide();

  $(".limain").click(function() {
    $(this).children('ul').show();
    $(this).siblings(".limain").children('ul').hide();
  });
  $(".lichild").click(function() {
    $(this).children('ul').show();
    $(this).siblings().children('ul').hide()
  });
});

<!-- This is the html I am generating using a PHP function -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="limain">A
    <ul>
      <li class="lichild">A1
        <ul>
          <li class="lichild">a2</li>
          <li class="lichild">a1
            <ul>
              <li class="lichild"><a href="vuv">aaaaaa</a></li>
              <li class="lichild"><a href="xyz">abbbbbb</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="lichild">A2</li>
      <li class="lichild">A3</li>
      <li class="lichild">A4</li>
      <li class="lichild"><a href="home">A5</a></li>
    </ul>
    <li class="limain">B
      <ul>
        <li class="lichild">B1</li>
        <li class="lichild"><a href="about">B2</a></li>
      </ul>
    </li>
    <li class="limain">C
      <ul>
        <li class="lichild">C1</li>
        <li class="lichild">C2</li>
        <li class="lichild">C3</li>
        <li class="lichild">A6
          <ul>
            <li class="lichild">A8
              <ul>
                <li class="lichild">A10
                  <ul>
                    <li class="lichild"><a href="abc">A13</a>
                    </li>
                    <li class="lichild"><a href="fgh">A14</a>
                    </li>
                  </ul>
                </li>
                <li class="lichild"><a href="cde">A11</a>
                </li>
              </ul>
            </li>
            <li class="lichild"><a href="abcd">A9</a>
            </li>
          </ul>
        </li>
        <li class="lichild"><a href="nop">A7</a>
        </li>
      </ul>
    </li>
    <li class="limain">D
      <ul>
        <li class="lichild">D1</li>
        <li class="lichild"><a href="klm">D2</a>
        </li>
      </ul>
    </li>
</ul>