Javascript 如何切换<；李>；在嵌套列表中

我试图一次切换一个子菜单，我迷失在嵌套中，不知道如何定位正确的列表项

我发现我应该使用find（）而不是children（），因为它可以深入巢穴，但仍然没有成功

    <ul>
      <li>Profile</li>
      <li>Edit</li>
      <li class="drop-nav"> <a href="#"> See your products</a>  
        <ul>                                      
          <li class="drop-nav"> <a href="#"> Mens </a>        
            <ul>
              <li>  <a href="#"> jumpers </a> </li>
              <li>  <a href="#"> t shirts </a> </li>
            </ul>
          </li>
          <li class="drop-nav"> <a href="#">Womens</a>           
            <ul>                          
              <li> <a href="#"> hoodies </a> </li>
              <li> <a href="#"> leggings </a> </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>


 $(".drop-nav").on("click", function(e){
   e.preventDefault();

   });



 li ul{
 display: none;
  }

侧面图
编辑

















$（“.drop nav”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
});
李乌尔{
显示：无；
}

任何帮助都将不胜感激。谢谢

您可以使用

$（this）.find（'ul'）.eq（0）

获得ul，但我会将显示的更改委托给样式表，但在适用的情况下使用javascript添加一个类。这将为您以后的下拉列表设计提供更多选项

$（.drop nav”）。在（“单击”上，函数（e）{
e、 预防默认值（）
//不要让事件水平或垂直地在树上触发
e、 停止即时复制（）
//切换可用于显示子对象的活动类
$（this.toggleClass（'active'））
})

/*不要以页面中的项目为目标，请更加具体*/
.下降导航>ul{
显示：无；
}
.drop-nav.active>ul{
显示：块；
}

侧面图
编辑

我会在标记中添加更多描述性类名，并使用CSS和jQuery使它们更容易定位

要切换菜单，可以执行以下操作：

$（.dropdown-trigger1”）。在（“单击”，函数（）上{
//切换第一个菜单
$（“.dropdown one”）.toggleClass（“打开”）；
//关闭子菜单
$（“.dropdown two”）.removeClass（“打开”）；
});
$（“.dropdown-trigger2”）。在（“单击”上，函数（e）{
//防止单击子菜单关闭菜单
e、 停止传播（）；
//关闭任何打开的子菜单
$（“.dropdown two”）.removeClass（“打开”）；
//打开已单击的子菜单
$（this.find（“.dropdown二”）.toggleClass（“打开”）；
});
liul{
显示：无；
}
.下拉菜单-1.打开{
显示：块；
}
.下拉菜单-2.打开{
显示：块；
}


侧面图
编辑
















您还没有描述如何激活每个子菜单，所以我将稍微抽象地描述一下解决方案。解决方案基于您的HTML结构，如果您不更改它，它将起作用

$('.drop-nav a').on('click', function() {
  // This next method returns next element in DOM that is after clicked a link.
  // Based on your HTML it would be ul that holds your sub-menu.
  var subMenu = $(this).next();

  // Here using subMenu selector to make something with sub-menu...
  // Example: adding CSS inline to sub. In your situation it may be something else...
  $(subMenu).css({ 'display' : 'block' });
});

我看不到您试图打开/折叠子项的代码。你能不能用完整的例子创建JS fiddle，然后我们就可以开始了。你需要提供更多的代码。你说你试着用
find
而不是
children
？让我们看看那部分。我相信你可以看到你说“我正试图用一些代码构建一个下拉菜单”的问题，而不向我们展示相关的代码。这并不能真正帮助我们帮助你。优雅而简单+1