1

我正在尝试创建一个无序列表，其中每个列表都<li>包含另一个无序列表。我要触发子菜单向下滑动的列表项有 class mobile-collapse，子菜单有 class 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#

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

4

2 回答 2

2

你的清单是这种形式

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

with class<a href="#">Services</a>的孩子也是如此， 这样做将隐藏/显示所有with class 的孩子，它们是：limobile-collapse
$(this).children().slideToggle();limobile-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();
    });
});
于 2013-04-01T18:33:24.983 回答
2

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

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

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

您可以更改行：
$(this).children().slideToggle();

$(this).children(".mobile-drop-menu").slideToggle();

希望这会奏效。

于 2013-04-01T18:38:46.890 回答