使用jQuery顯示和隱藏嵌套列表切換

Question

我有一些問題顯示和隱藏嵌套列表的某些元素。我的HTML代碼如下：

<ul class="unstyled"> 
     <li onClick="foo();">INFO 1234 - Some Code Subject 
     <ul> 
      <li class="sem_hide">Semester 1 
      <li class="sem_hide">Semester 2 
      <li class="sem_hide">Semester 3 
     </ul> 
     <li onClick="foo();">INFO 4567 - Some DB Subject 
     <ul> 
      <li class="sem_hide">Semester 1 
      <li class="sem_hide">Semester 2 
      <li class="sem_hide">Semester 3 
     </ul> 
</ul> 

我的JavaScript看起來像這樣：

<script> 
     function foo() 
     { 
      if($('li .sem_hide').is(":visible")) 
      { 
       $('li .sem_hide').hide(); 
      } 
      else 
      { 
       $('li .sem_hide').show(); 
      } 
     } 
</script> 
<script type="text/javascript" src="js/jquery.js"></script> 

我的CSS是這樣的：

<style> 
    body{ 
     width: 600px; 
     margin-left: auto; 
     margin-right: auto; 
     background: #efefef; 
    } 

    li .sem_hide{ 
     display: none; 
    } 

</style> 

我新的網絡開發和我目前面臨一個問題，那就是當我點擊某個科目時，所有科目的所有學期都會顯示，但是我想要的是僅顯示點擊科目的學期。有沒有解決方法來獲得我想要的？

謝謝。

Answer 1

在使用它之前添加jQuery，將它傳遞給foo指向源對象。

<script> 
     function foo(obj) 
     { 
      if($('.sem_hide', obj).is(":visible")) 
      { 
       $('sem_hide', obj).hide(); 
      } 
      else 
      { 
       $('.sem_hide', obj).show(); 
      } 
     } 
</script> 
<li onClick="foo(this);"> 

Answer 2

<ul class="unstyled"> 
    <li class = 'subject'>INFO 1234 - Some Code Subject 
    <ul class = "semList> 
     <li>Semester 1</li> 
     <li>Semester 2</li> 
     <li>Semester 3</li> 
    </ul> 
    <li class = "subject">INFO 4567 - Some DB Subject 
    <ul class ='semList'> 
     <li>Semester 1</li> 
     <li>Semester 2</li> 
     <li>Semester 3</li> 
    </ul> 
</ul> 

<script> 
    $(document).ready(function(){ 
     $(".subject").click(function(){ 
      $(".semList").hide(); 
      $(this).next(".semList").show(); 
     }); 
</script>