使用jQuery下载ul li

Question

我的目的是：当使用方法'click'时，li将在jQuery中以方法fadeToggle出现。

这是我的代码。这里的问题是当点击任何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

使用ul获取当前$(this)，然后在ul内找到＆＃39; li并切换它们。

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;