隐藏菜单中的嵌套选项

Hiding nested options in li menu

本文关键字：选项 嵌套 隐藏菜单      更新时间：2023-09-26

我不知道如何隐藏菜单上嵌套的选项。我想把所有东西都隐藏在"s01"answers"s02"下面。

当你点击尖叫女王，菜单展开显示一切。我希望它只显示"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>

问题是，一切都包含在你的li是li的一部分，即使它是一个ul。如果你点击ul，而li又在里面，点击事件就会同时触发。

我在你所有的文本周围添加了一个label，以便有其他的东西而不是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元素。

在这里找到更新的JSFiddle http://jsfiddle.net/2ajq59re/13/.

$('.items ul').hide();
$('.sub_items > a').click(function() {
    $(this).next('.items').stop().slideToggle();
});
$('.sub_items2').click(function() {
    $(this).find('.entries').stop().slideToggle();
});

Your子项目需要有一个独立于父类的标识符和一个单独的单击函数(在这个例子中，我刚刚将它们重命名为.sub_items2，您喜欢怎么用就怎么用)。我还将点击功能放在锚标记上，锚标记包裹在尖叫皇后(父节点)周围。这阻止了你的第一次点击功能，当你点击子元素时关闭所有东西，而不仅仅是"标题"。

遵循相同的格式，您的其他项将使用相同的两个单击函数。.find()已更改为.next()，因为单击函数不再针对父节点，而是针对兄弟节点。

我还添加了。stop()。您会发现这在使用slideToggle()时非常有用。它会停止一个"队列"(也就是说，在多次点击之后，它不会执行剩余的动作，在点击到一半的时候，它会停止自己并走另一条路)。

编码快乐!: -)

.find()查找所有子节点，您应该使用> -直接子操作符.find(' > ul')。但是现在click事件正在冒泡并触发click on parent，为了防止，您应该将event事件传递给click事件，并停止冒泡。

更新小提琴

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

相关文章：