javascript - 使用 jQuery 下拉 ul li

Question

我的目的是:当使用 'click' 方法时，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
	<li><a href="#" title="">AAAAAA</a></li>
	<li><a href="#" title="">BBBBBB</a></li>
	<li><a href="#" title="">AAAAAA</a></li>
	<li><a href="#" title="">AAAAAA</a></li>
</ul>

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

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

Answer 1

使用 $(this) 获取当前的 ul，然后在那个 ul 中找到 'li's 并切换它们。

 $('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
	<li><a href="#" title="">AAAAAA</a></li>
	<li><a href="#" title="">BBBBBB</a></li>
	<li><a href="#" title="">AAAAAA</a></li>
	<li><a href="#" title="">AAAAAA</a></li>
</ul>

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

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