Question

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

我首先向ul中的所有li项目添加了一个名为'hidden'的css类。我用jQuery做到这一点。此类具有属性visibility:hidden，opacity:0和height:0

如果在内部带有li的{{1}}上单击，则将“隐藏”类删除，并将“活动”类添加到该ul中。我用jQuery做到这一点。此类具有属性ul，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项在css中都具有position：static。 li项的位置为：块。

问题

如果单击“ a关于”，则会显示“关于”中的li。但是，如果单击关于ul的1.1，则前面提到的li将再次隐藏（将其分配为css类“隐藏”）。

我认为 ul关于以某种方式“捕捉”鼠标单击（因为它是包围的父级），使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>

更多细节：

如果您在click上应用li事件，它将首次使子ul li可见，但是当您单击“关于1.1”时，您将首先单击其父项。

请参见下图，以了解菜单打开时整个li会认为该点击事件

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

1 个答案: