jQuery 可折叠

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的 child 与类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();
    });
});