ネストされたリストの表示の切り替えと：ホバーの効果

Question

クリックしてナビゲートするためにクリックできる他のメニュー項目のリストを表示できるメニュー項目を含むナビゲーションセクションを作成しようとしています。これまでのところ私はこのもたらした<ul> & <li>を使用して試してみました：これは私のためにいくつかの問題を作成している

<ul class="list-unstyled"> 
    <li> 
     <a href="#"><img src="images/Home.png" alt="home image"/></a> 
     <p>Directories</p> 
     <ul class="list-unstyled"> 
      <li>Test Text 1</li> 
      <li>Test Text 2</li> 
      <li>Test Text 3</li> 
     </ul> 
    </li> 
    <li> 
     <a href="#"><img src="images/Home.png" alt="home image"/></a> 
     <p>Contracts</p> 
    </li> 
    <li> 
     <a href="#"><img src="images/Home.png" alt="home image"/></a> 
     <p>Processes</p> 
    </li> 
    <li> 
     <a href="#"><img src="images/Home.png" alt="home image"/></a> 
     <p>Filing</p> 
    </li> 
    <li> 
     <a href="#"><img src="images/Home.png" alt="home image"/></a> 
     <p>My Profile</p> 
    </li> 
</ul> 

。まず、私はこれをコード化する方法がわからないので、ユーザーがDirectoriesをクリックしたときに、ulがネストされています。

また、これに別の問題は、それが:hover効果は全ての代わりに、個々の項目に適用されていることを意味し、1 ITMEとしてDirectoriesリストとDirectoriesリスト内の<ul>を扱うということです。

IがA）:hover効果が親リストと入れ子の両方に独立して適用されるように、個別にネストされたリストを扱う）示し、Directories<li>項目とBのクリック時に非表示にするには、ネストされたリストを切り替えることができます方法はありますリスト。

を使用でき

Answer 1

、

$("p").click(function() { 
    $(this).closest("li").find("ul").slideToggle(); 
}); 

closest()は、親李

は、その後、あなたがjqueryのを使用している場合a）は、このヘルプはあなたの意志find("ul")

Answer 2

を使用して、子ULにトラバースあなたを取得します。

$('#toggle').click(function() { 
 
    $('.sub-menu').toggle(); 
 
});

.sub-menu{ 
 
display:none} 
 

 

 

 
.list-unstyled >li >a:hover{ 
 
background:blue; 
 
color:white}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list-unstyled"> 
 
    <li id=toggle> 
 
    <a href="#"><img src="images/Home.png" alt="home image" /></a> 
 
    <p>Directories</p> 
 
    <ul class="sub-menu"> 
 
     <li>Test Text 1</li> 
 
     <li>Test Text 2</li> 
 
     <li>Test Text 3</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="images/Home.png" alt="home image" /></a> 
 
    <p>Contracts</p> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="images/Home.png" alt="home image" /></a> 
 
    <p>Processes</p> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="images/Home.png" alt="home image" /></a> 
 
    <p>Filing</p> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="images/Home.png" alt="home image" /></a> 
 
    <p>My Profile</p> 
 
    </li> 
 
</ul>