如何制作三级下拉菜单

How to make dropdown menu with 3 levels?

本文关键字：三级 下拉菜单 何制作      更新时间：2023-09-26

我有一个简单的菜单，当你点击菜单项打开嵌套列表时，我想这样做。如果双击，则必须打开和关闭它。

Html:

<ul class="menu">
    <li class="has-child">Click here
        <ul>
            <li class="has-child">Click here
                <ul>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1</li>
    <li>Level 1</li>
</ul>

jQuery:

$('li.has-child').on('click', function () {
    var elem = $(this).children('ul');
    if (elem.is(':hidden')) {
        elem.slideDown(500);
    } else {
        elem.slideUp(500);
    }
});

但当我点击第二级的菜单项时，第一级就关闭了。为什么会发生这种情况，以及如何解决？

[JSFiddle]

您需要阻止事件从父级传播到子级，反之亦然。您可以使用event.stopPropagation():

$('li.has-child').on('click', function (event) {
    event.stopPropagation()
    var elem = $(this).children('ul');
    if (elem.is(':hidden')) {
        elem.slideDown(500);
    } else {
        elem.slideUp(500);
    }
});

您需要使用stopPropagation

$(document).ready(function () {
    $('li.has-child').on('click', function (event) {
        event.stopPropagation();
        var elem = $(this).children('ul');
        if (elem.is(':hidden')) {
            elem.slideDown(500);
        } else {
            elem.slideUp(500);
        }
    });
});

这将停止点击冒泡到父li

Fiddle

相关文章：