Jquery垂直多级菜单父li捕获内部ul的鼠标点击？

Posted 2023-05-08

【中文标题】Jquery垂直多级菜单父li捕获内部ul的鼠标点击？

【英文标题】：Jquery vertical multilevel menu parent li catches mouseclicks of inner ul?

【发布时间】：2019-03-03 10:18:04

【问题描述】：

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

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

如果单击内部带有ul 的li，则会删除“隐藏”类，并添加“活动”类（到该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 About，就会显示 About 中的 ul。但是，如果我点击 li About 1.1，前面提到的 ul 会再次隐藏（它被分配 css-class 'hidden'）。

我认为 li 关于以某种方式“捕获”鼠标点击（因为它是包含父级的），使 jquery 删除“活动”类并应用“隐藏”类。

我该如何解决这个问题？

【参考方案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");
	
);

.hiddendisplay: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 将考虑点击事件

【讨论】：

您先生，真是个天才。我已经怀疑父李正在响应点击它的内部元素。以下适用于子菜单和子子菜单。我相信你忘记了 1 个父母（）？ $(".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"); );