javascript - 在 li 菜单中隐藏嵌套选项

Question

我不知道如何隐藏菜单上的嵌套选项。我喜欢将所有内容隐藏在“s01”和“s02”下。

当您单击尖叫皇后时，菜单会展开以显示所有内容。例如，当用户点击“s01”时，id 喜欢它只显示“s01”或“s02”。只有那些链接会展开。

我是 jquery 的新手，目前为止很喜欢它。

任何帮助都会有帮助，谢谢

JSFIDDLE

$('.items ul').hide();

$('.sub_items').click(function () {
    $(this).find('ul').slideToggle();
});

.navigation
{
    margin-left: 10px;
    font-size: 16px;
    font-weight: bold;
}
.items
{
    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: normal;
    cursor: pointer;
}
.entries
{
    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: normal;
    cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="navigation">
<li class="sub_navigation">TV Series
    <ul class="items">
        <li class="sub_items">Scream Queens
            <ul class="items">
                <li class="sub_items">S01
                    <ul class="entries">
                        <li class="sub_entries">Preview</li>
                        <li class="sub_entries">Inside Look</li>
                        <li class="sub_entries">Preview #02</li>
                    </ul>
                </li>
                <li class="sub_items">S02
                    <ul class="entries">
                        <li class="sub_entries">Preview</li>
                        <li class="sub_entries">Inside Look</li>
                        <li class="sub_entries">Preview #02</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="sub_items">Shannara Chronicles, The
            <ul class="entries">
                <li class="sub_entries">S01</li>
            </ul>
        </li>
        <li class="sub_items">Walking Dead, The
            <ul class="entries">
                <li class="sub_entries">S06</li>
            </ul>
        </li>
    </ul>
</li>
</ul>

Answer 1

问题是 li 中包含的所有内容都是 li 的一部分，即使它是 ul。因此，如果您点击 li 中的 ul，则会触发这两个点击事件。

我在您所有的文本周围添加了一个标签，以包含 li 以外的内容:

<li class="sub_items"><label>Scream Queens</label>

然后调整jquery如下:

$('.items ul').hide();

$('.sub_items > label').click(function() {
    $(this).parent().find(' > ul').slideToggle();
});

所以我只监听label的点击事件，然后获取父元素，然后只切换直接降序的ul元素。