jQueryはアイコンクリックに基づいて次のULを切り替えます

Question

アコーディオンスタイルの表示を試みています。私が欲しい、ディスプレイの種類に

ベター参照： https://imgur.com/tr9cd52

あなたは下の項目を表示する必要があり、それをクリックすると、矢印があるリリーの右に気づくでしょう。

私の挑戦は、ボタンをクリックしたときに次のulが表示/非表示になるようにDOMを正しくトラバースすることです。私はどのようにそれを行うのですか？

私がしようとしていることは、ネストされたスタイルを表示することですが、アコーディオン効果を作成するボックスに表示されると確信しています。

の作業フィドルhttps://jsfiddle.net/zigzag/aLb5d2uL/10/

$('.menu-toggle').click(function(e) { 
 
    e.preventDefault(); // prevent <a> to redirect to the top of the page 
 
    $(this).nextall('ul').toggle(); 
 
});

.chartArea { 
 
    padding: 20px 20px 0 0; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 
.glyphicon { 
 
    color: white; 
 
} 
 

 
.tile { 
 
    margin: 10px; 
 
    padding: 20px; 
 
    background-color: gray; 
 
    font-family: segoe UI; 
 
    color: white; 
 
    min-height: 150px; 
 
} 
 

 
.empDetails { 
 
    font-size: 14px; 
 
    color: white; 
 
} 
 

 
.chartArea ul li { 
 
    display: none; 
 
} 
 

 
.chartArea>ul>li { 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="container-fluid chartArea"> 
 
    <ul> 
 
    <li> 
 
     <div class="tile">Adam</div> 
 
    </li> 
 
    <li> 
 
     <div class="tile"> 
 
     <div class="col-sm-2 img_tile"> 
 
      <img src="http://via.placeholder.com/50x50"> 
 
     </div> 
 
     <div class="col-sm-8 empDetails"> 
 
      <h4> 
 
      Lily 
 
      </h4> 
 
      <p> 
 
      Director 
 
      </p> 
 
      <p> 
 
      Ensure quality and timely delivery through resource and time management. 
 
      </p> 
 
     </div> 
 
     <div class="col-sm-2 toggle_button"> 
 
      <a class="menu-toggle" href="#"> 
 
      <span class="glyphicon glyphicon-menu-down"></span> 
 
      </a> 
 
     </div> 
 
     </div> 
 
     <ul> 
 
     <li> 
 
      <div class="tile"> 
 
      <div class="col-sm-2 img_tile"> 
 
       <img src="http://via.placeholder.com/50x50"> 
 
      </div> 
 
      <div class="col-sm-8 empDetails"> 
 
       <h4> 
 
       Sen 
 
       </h4> 
 
       <p> 
 
       Manager 
 
       </p> 
 
       <p> 
 
       Ensure quality and timely delivery through resource and time management. 
 
       </p> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="tile">Another Sen</div> 
 
      <ul> 
 
      <li> 
 
       <div class="tile">Sen jr</div> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="tile">Justin</li> 
 
    </ul> 
 
</div>

コードのほとんどは、上記の掲示されます。いくつかのネストされたUL Liタグがありますが、そのたびにクリック周りのオブジェクトのリストを折りたたむ、または表示するロジックを作成する方法を見つけることができません。

Answer 1

多くのことがここで行われています。

1. jQueryはあなたのフィディルドには含まれていません。 Javascriptパネル内で、「ギア」アイコンをクリックし、jQueryバージョンを選択します。
2. 引用符を使用すると、実際のDOM要素ではなく "this"という文字列をjQueryに渡すので、$（this）以外の$を使用します。
3. CSSでは、<ul>をすべて表示しないように設定しています。その値を.chartArea ul { display: none; }から.chartArea ul li ul {display: none; }に変更する必要があります。<ul> <li>のみが非表示になります。

私は実際にあなたがあなたのHMTLが簡単にDOMナビゲーションを作るためにビットをマークアップが、あなたのマークアップでこれを行うには変更をお勧めします、あなたは次のことを行うことができます必要があります。

1. 親要素を特定しますこれは、表示しようとしている< >と<ul>に共通しています。この場合、それは<です。>ですので、ツリーを上に移動します。
2. ここからは、表示したくない非表示の<ul>のツリーを見ていきます。唯一のものがあるので、簡単に見つけることができます。このツリーに移動して
3. この要素を表示するには、jQueryメソッドを使用してください。

ここはフィドルです。私はあなたのjQueryと1つのCSSルールを変更しました。 https://jsfiddle.net/f4m22hmy/1/