JQuery下拉菜单三个层次

JQuery dropdown menu three levels

本文关键字：三个 层次 下拉菜单 JQuery      更新时间：2023-09-26

我有一个三级菜单:

HTML: 

<ul class="main-menu">
    <li><a href="#">About</a></li>
    <li>
        <a href="#">Blog</a>
        <ul class="level2">
            <li>
                <a href="#">item1</a>
                <ul class="level3">
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                </ul>
            </li>
            <li><a href="#">item2</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>
CSS: 

.main-menu li a {
    color: #000;
}
.level3,
.level2 {
    display: none;
}
.main-menu li.active .level2 {
    display: block;
}
.level2 li.active .level3 {
    display: block;
}

脚本:

$('.main-menu > li').click(function () {
    $(this).toggleClass('active');
});
$('.level2 > li').click(function () {
    $(this).toggleClass('active');
});

问题是，当我点击第二层的元素时，第三层的列表不会打开。如何解决这个问题?如何重构不重复的代码?

演示

使用 event.stopPropagation() tp防止从子元素到父元素的事件冒泡。

$('.main-menu > li').click(function () {
    $(this).toggleClass('active');
    $('.level2 > li').removeClass('active');
});
$('.level2 > li').click(function (event) {
    $(this).toggleClass('active');
    event.stopPropagation();
});
相关文章：