jQueryを使用したDropdown ul li

Question

私の目的は：メソッド 'クリック'を使用すると、liがjQueryのfadeToggleメソッドで表示されます。

ここに私のコードです。ここでの問題は、任意のULをクリックすると、他のすべてのULのすべてのLIも表示されることです。

$('ul').on('click', function(){ 
 
     $('li').fadeToggle("fast"); 
 
});

a{ 
 
    text-decoration:none; 
 
    padding: 20px; 
 
} 
 
ul{ 
 
    display:inline-block; 
 
    background-color:green; 
 
    padding:10px; 
 
    color:white; 
 
    margin: 10px; 
 
} 
 
li{ 
 
    background-color:pink; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul>HOME 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">BBBBBB</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
</ul> 
 

 
<ul>CONTACT 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">BBBBBB</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
</ul> 
 

 
<ul>BYE 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">BBBBBB</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
</ul>

Answer 1

「はulの李の内部を見つけて、それらを切り替え、その後、$(this)と現在のulを取得します。

$('ul').on('click', function(){ 
 
     $(this).find('li').fadeToggle("fast"); 
 
});

a{ 
 
    text-decoration:none; 
 
    padding: 20px; 
 
} 
 
ul{ 
 
    display:inline-block; 
 
    background-color:green; 
 
    padding:10px; 
 
    color:white; 
 
    margin: 10px; 
 
} 
 
li{ 
 
    background-color:pink; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul>HOME 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">BBBBBB</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
</ul> 
 

 
<ul>CONTACT 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">BBBBBB</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
</ul> 
 

 
<ul>BYE 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">BBBBBB</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
\t <li><a href="#" title="">AAAAAA</a></li> 
 
</ul>