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)应该有用。

Jquery to toggle元素显示所有子项

2 个答案: