jQueryの子要素の子要素を非表示にする方法

Question

私は、MySQLのテーブルとPHPからいくつかのネストされたサブレベルまでメニューを作成しています。このような 私のメニュー：

B
C

クリックした場合、それはすべての子要素を示していると、再び私も細かい子要素を表示することの子要素をクリックしてください最初の時間に。
しかし問題は、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>

Answer 1

使用内部の兄弟を見つけて、それを隠します。

$(".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>

Answer 2

 $(document).ready(function() { 
     $(".lichild").parent().hide(); 
     $(".limain").click(function() { 
      $(this).children('ul').show(); 
      $(this).siblings().find('ul').hide(); 
     }); 
     $(".lichild").click(function() { 
      $(this).children('ul').show(); 
      $(this).siblings('li').find('ul').hide() 

     }); 
    });