要素を切り替えるJqueryはすべての子を示します

私はデータベースから生成されたhtmlファイルを持っています。私は各ul/liセクションを個別に表示/非表示にしたいと思います。 htmlの例要素を切り替えるJqueryはすべての子を示します

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

しかし、これらのすべてがトグルをまったく起こさせません。どんな提案もお願いします。

おかげ

出典

2017-03-02 Karl Manning