jquery - 单击带有子元素的主选项时下拉菜单出错

Question

我在html中有如下代码

<ul>
 <li>
   <a href="url1">URL1</a>
   <ul>
    <li><a href="url11">URL1_1</a></li>
    <li><a href="url12">URL1_2</a></li>
....

CSS 代码:

.hidden {
   display: none;
}

和JS代码:

$(function() {

  $("ul > li > ul").addClass("hidden");
  $("ul > li > a").click(function(e) { 
    var li = $(this).parent();      
    e.preventDefault();     
    li.find("ul").first().slideToggle();        
   });      
}); 

如果使用 e.preventDefault(); 我的子菜单会显示，但我的 ul>li> a 不会将我的页面重定向到 href 链接。

然后...如果我删除 e.preventDefault(); 则显示我的子菜单，我的页面被重定向到 href 链接，但我的子菜单立即再次隐藏。 你能帮帮我吗？

Answer 1

您应该尝试向 UL 标签添加类。

你的问题是

 $("ul > li > a").click(function(e)

会卡在一个循环中，阻止子 ul 的点击。

我会尝试为他们提供类 - 第一级、第二级并在您的 jQuery 选择器中使用它们。

 $(".second-level").addClass("hidden");
 $(".first-level > a").click(function(e) {

恕我直言，在原始元素标签上使用此类通用选择器并不好。希望对你有帮助