javascript - jQuery中如何隐藏子元素的子元素

Question

我有一个菜单，从 MySQL 表和 PHP 填充到一些嵌套的子级别。我的菜单是这样的:

一个
乙
C

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

为此我使用了 jQuery。

所以我想带回原来的状态？ (只展开top子元素，不展开sub子元素)，
怎么做？

//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>

Answer 1

使用 find inside siblings 并隐藏它。

$(".lichild").parent().hide();

$(".limain").click(function() {
  $(this).children('ul').show();
  $(this).siblings(".limain").find('ul').hide(); // Change in this line
});
$(".lichild").click(function() {
  $(this).children('ul').show();
  $(this).siblings().children('ul').hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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>