Question

我正在尝试创建一个无序列表，其中每个<li>包含另一个无序列表。我想触发子菜单向下滑动的列表项具有类mobile-collapse，子菜单具有类mobile-drop-menu。这是我的jquery代码：

<script>
$(function() {
$(".mobile-drop-menu").hide();
$(".mobile-collapse").click(function() { 
    $(this).children().slideToggle();
});
});


</script>

但是当我测试它并单击mobile-collapse <li>时它会消失。这是一个测试它的链接。您必须将窗口大小拖到非常小的位置才能显示无序列表。 https://wwwdev.cco.purdue.edu/boot/student.shtml#

有人可以帮我解决这个问题或者找到更好的方法来实现这个目标吗？感谢

Answer 1

您的列表采用此格式

<li class="mobile-collapse"><a href="#">Services</a>
        <ul class="mobile-drop-menu">
            <li><a href="#">International Students</a></li>
            <li><a href="#">Teacher Employment</a></li>
            <li><a href="#">Diverse Populations</a></li>
        </ul>

所以<a href="#">Services</a>也是li的孩子，班级为mobile-collapse 这样做$(this).children().slideToggle();将隐藏/显示 li所有mobile-collapse类的孩子：

<a href="#">Services</a>
        <ul class="mobile-drop-menu">
            <li><a href="#">International Students</a></li>
            <li><a href="#">Teacher Employment</a></li>
            <li><a href="#">Diverse Populations</a></li>
        </ul>

所以，将您的功能更改为：您需要使用find()转义<a>

来搜索列表

    $(function() {
    $(".mobile-drop-menu").hide();
    $(".mobile-collapse").click(function() { 
        $(this).find('.mobile-drop-menu').slideToggle();
    });
});

Answer 2

Jquery slideToggle只需使用 “display:block”或“display:none”表示或隐藏元素。

$(this).children().slideToggle();

这将对包含该链接的“ mobile-collapse ”类的所有子元素进行操作。所以我们需要过滤掉链接元素。

您可以更改线路：
$(this).children().slideToggle();
以
$(this).children(".mobile-drop-menu").slideToggle();

希望这会奏效。

可以折叠jQuery

2 个答案: