Jquery切換元素顯示所有子項

Question

我有一個從數據庫中生成的html文件。我希望每個ul/li部分在點擊時獨立顯示/隱藏。 html的例子。

<li class="goal-list">Demo - Learning Spanish guitar</li> 
    <ul> 
     <li class="task-list">Demo - Playing techniques</li> 
      <ul> 
       <li class="resource-list 
       "><a href="https://youtu.be/7iVFncQADvc" 
       target=_blank 
       onclick="root_path"><i class="fa fa-video-camera"></i> Demo - Listen to John Williams play and explain</a></li> 
       <li class="resource-list 
       "><a href="http://www.thisisclassicalguitar.com/wp-content/uploads/2014/07/Tarrega-Recuerdos.pdf" 
       target=_blank 
       onclick="root_path"><i class="fa fa-book"></i> Demo - Download sheet music</a></li> 
       <li class="resource-list 
       "><a href="#" 
       target=_self 
       onclick="root_path"><i class="fa fa-music"></i> Demo - Record own playing</a></li> 
       <li class="resource-list 
       "><a href="#" 
       target=_self 
       onclick="root_path"><i class="fa fa-users"></i> Demo - Perform with tutorclass</a></li> 
      </ul> 
     <li class="task-list">Learn the fretboard </li> 
      <ul> 
      </ul> 
    </ul> 
</li> 

下面的代碼顯示/隱藏每個子項目。

$(document).ready(function(){ 

    $("li.goal-list").click(function(){ 
     $("li.task-list").toggle(1000); 
     return false; 
    }); 

    $("li.task-list").click(function(){ 
     $("li.resource-list").toggle(1000); 
     return false; 
    }); 

}); 

我相信我需要更具體的找到標籤。我試過

$(this).next("li.resource-list").toggle(1000); 

$(this).children("li.resource-list").toggle(1000); 

$(this).siblings("li.resource-list").toggle(1000); 

但是，所有這些都停止了切換髮生。任何建議請。

感謝

Answer 1

您可以使用$(this).siblings('ul')切換整個街區。 見JSFiddle。

Answer 2

.children()不返回子子女，即子女的子女。 您需要使用.find()。

$(this).find(".resource-list").toggle(1000)應該工作。