jquery垂直多级菜单parent li捕获内部ul的mouseclicks？

Question

我正在尝试为小屏幕制作垂直多级菜单。

我首先在 li 中的所有 ul 项中添加一个名为 'hidden 的 css 类。我用 jquery 做这个。此类具有属性 visibility:hidden、opacity:0 和 height:0

如果点击里面有 ul 的 li，'hidden' 类会被移除，并添加一个 'active' 类(到那个 ul)。我用 jquery 做这个。此类具有属性 visibility:visible、opacity:1 和 height:auto。

$(".menu > li > ul").addClass("hidden");
	$(".menu > li > ul > li > ul").addClass("hidden");
	
	$(".menu > li").has("ul").click(function(){
        if ( $(this).children("ul").hasClass( "hidden" ) ) {
            $(this).children("ul").removeClass("hidden");
            $(this).children("ul").addClass("active");
        } else {
            $(this).children("ul").removeClass("active");
            $(this).children("ul").addClass("hidden");
        }
    });

    $(".menu > li > ul > li").has("ul").click(function(){
        if ( $(this).children("ul").hasClass( "hidden" ) ) {
            $(this).children("ul").removeClass("hidden");
            $(this).children("ul").addClass("active");
        } else {
            $(this).children("ul").removeClass("active");
            $(this).children("ul").addClass("hidden");
        }
    });

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">About 1.1</a></li>
            <li><a href="#">About 1.2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Hello</a>
        <ul>
            <li><a href="#">Hello 1.1</a></li>
            <li>
                <a href="#">Hello 1.2</a>
                <ul>
                    <li><a href="#">Hello 1.2.1</a></li>
                    <li><a href="#">Hello 1.2.2</a></li>
                    <li><a href="#">Hello 1.2.3</a></li>
                </ul>
            </li>
            <li><a href="#">Hello 1.3</a></li>
        </ul>
    </li>
</ul>

所有 ul 和 li 项在 css 中都有 position:static。 a 元素有 position:block。

问题

如果我单击 li 关于，将显示关于中的 ul。但是，如果我单击 li About 1.1，上述 ul 将再次隐藏(它被分配了 css 类“隐藏”)。

我 认为 li 关于以某种方式“捕获”鼠标点击(因为它是包含父项)，使 jquery 删除“事件”类并应用“隐藏” '-类。

我该如何解决这个问题？

Answer 1

您需要将点击事件应用于 a 而不是直接应用于整个 li

请检查以下代码:

$(".menu > li > ul").addClass("hidden");
$(".menu > li > ul > li > ul").addClass("hidden");

$(".menu > li a").click(function(){
	if ( $(this).parent().children("ul").hasClass( "hidden" ) ) {
		$(this).parent().children("ul").removeClass("hidden");
		$(this).parent().children("ul").addClass("active");
	} else {
		$(this).parent().children("ul").removeClass("active");
		$(this).parent().children("ul").addClass("hidden");
	}
});

.hidden{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">About 1.1</a></li>
            <li><a href="#">About 1.2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Hello</a>
        <ul>
            <li><a href="#">Hello 1.1</a></li>
            <li>
                <a href="#">Hello 1.2</a>
                <ul>
                    <li><a href="#">Hello 1.2.1</a></li>
                    <li><a href="#">Hello 1.2.2</a></li>
                    <li><a href="#">Hello 1.2.3</a></li>
                </ul>
            </li>
            <li><a href="#">Hello 1.3</a></li>
        </ul>
    </li>
</ul>

更多细节:

如果你在 li 上应用 click 事件，它将第一次显示子 ul li，但是当你点击“关于” 1.1"你首先点击它的父级。

请看下图，当菜单打开时，整个 li 将考虑点击事件