Question

我无法弄清楚如何隐藏菜单上的嵌套选项。我喜欢隐藏“s01”和“s02”下的所有内容。

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

我对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

在此处http://jsfiddle.net/2ajq59re/13/找到更新的JSFiddle。

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

$('.sub_items > a').click(function() {
    $(this).next('.items').stop().slideToggle();
});

$('.sub_items2').click(function() {
    $(this).find('.entries').stop().slideToggle();
});

你的子项需要有一个单独的标识符来自父类和一个单独的单击函数（我刚刚将它们重命名为.sub_items2用于这个例子，使用你喜欢的。我也把点击功能放到了我已经把Scream Queens（父母）包裹起来的锚标签。当你点击孩子而不仅仅是“标题”时，这会停止你关闭所有内容的第一个点击功能。

遵循相同的格式，您的其他项目将使用相同的两个单击功能。 .find（）已更改为.next（），因为click函数不再针对父级而是兄弟级。

我还添加了.stop（）。你会发现这对slideToggle（）非常有用。它会停止一个“队列”（即在多次点击之后它没有执行剩余的动作，在一半的点击中，它会自行停止并向另一个方向移动）。

快乐的编码！： - ）

Answer 2

.find()找到所有孩子，您应该使用> - 直接子操作员.find(' > ul')。但是现在点击事件正在冒泡并触发点击父级，以防止您将event传递给click事件，并停止冒泡。

updated fiddle

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

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

Answer 3

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

我在你的所有文字中添加了label，以便有其他内容来处理：

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

然后按如下方式调整jquery：

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

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

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

隐藏li菜单中的嵌套选项

3 个答案: