为什么当点击第一个h1或第二个h1或第二个h3,显示只有第三个ul隐藏和显示，请大神们帮忙看看！！

Question

//HTML部分

 <div id="main">

  <div id="sidebar">

  

   <h1>励志句子1</h1>

  <ul>

     <li>不要认为自己怀才不遇，不要认为上天不眷顾你，</li>

 <li>更不要因此自暴自弃。静下心来耐心等待，其实机会在等你与它相遇</li>

 <li>沉住气，做好准备，说不定下一个就是你。</li>

 <li>不要认为自己怀才不遇，不要认为上天不眷顾你，</li>

 <li>更不要因此自暴自弃。静下心来耐心等待，其实机会在等你与它相遇</li>

 <li>沉住气，做好准备，说不定下一个就是你。</li>

  </ul>

   <h1>励志句子2</h1>

  <ul>

     <li>不要认为自己怀才不遇，不要认为上天不眷顾你，</li>

 <li>更不要因此自暴自弃。静下心来耐心等待，其实机会在等你与它相遇</li>

 <li>沉住气，做好准备，说不定下一个就是你。</li>

 <li>不要认为自己怀才不遇，不要认为上天不眷顾你，</li>

 <li>更不要因此自暴自弃。静下心来耐心等待，其实机会在等你与它相遇</li>

 <li>沉住气，做好准备，说不定下一个就是你。</li>

  </ul>

   <h1>励志句子3</h1>

  <ul>

     <li>不要认为自己怀才不遇，不要认为上天不眷顾你，</li>

 <li>更不要因此自暴自弃。静下心来耐心等待，其实机会在等你与它相遇</li>

 <li>沉住气，做好准备，说不定下一个就是你。</li>

 <li>不要认为自己怀才不遇，不要认为上天不眷顾你，</li>

 <li>更不要因此自暴自弃。静下心来耐心等待，其实机会在等你与它相遇</li>

 <li>沉住气，做好准备，说不定下一个就是你。</li>

  </ul>

</div>

</div>

//JS调用部分

  

$(function(){

$('#sidebar h1').eq(0).toggle(function(){    

        $('#sidebar ul').eq(0).hide();

  },function(){

        $('#sidebar ul').eq(0).show();

  });

 

$('#sidebar h1').eq(1).toggle(function(){    

        $('#sidebar ul').eq(1).hide();

  },function(){

        $('#sidebar ul').eq(1).show();

  });

 

$('#sidebar h1').eq(2).toggle(function(){    

        $('#sidebar ul').eq(2).hide();

  },function(){

        $('#sidebar ul').eq(2).show();

  });

 function eq(num){

     var element=this.elements[num];

 this.elements=[];

 this.elements[0]=element;

 return this;

 }

    

});

Answer 1

<script type="text/javascript">     $(function(){         $('#sidebar h1').eq(0).click(function(){             $('#sidebar ul').eq(0).toggle();         });         $('#sidebar h1').eq(1).click(function(){             $('#sidebar ul').eq(1).toggle();         });         $('#sidebar h1').eq(2).click(function(){             $('#sidebar ul').eq(2).toggle();         });     }); </script>不知道你想要的是不是这样的