Question

我试图能够一次一个地切换这些子菜单，我迷失在巢中并且无法弄清楚如何定位正确的列表项，

我发现我应该使用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;
  }

非常感谢任何帮助。感谢

Answer 1

您可以使用$(this).find('ul').eq(0)来获取ul，但我会将显示的更改委托给样式表，但是在适用的情况下使用javascript添加类。这将为您稍后设计下拉列表提供更多选项。

$(".drop-nav").on("click", function(e) {
  e.preventDefault()
  // don't allow the event to fire horizontally or vertically up the tree
  e.stopImmediatePropagation()
  // switch the active class that you can use to display the child
  $(this).toggleClass('active')
})

/* don't target ll list items in you page, be more specific */
.drop-nav > ul {
  display: none;
}

.drop-nav.active > ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

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

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

$(".dropdown-trigger1").on("click", function() {
  // Toggle the first menu 
  $(".dropdown-one").toggleClass("open");
  // Close the submenus 
  $(".dropdown-two").removeClass("open");
});

$(".dropdown-trigger2").on("click", function(e) {
  // Prevent a click on a submenu from closing the menu
  e.stopPropagation();
  // Close any open submenu
  $(".dropdown-two").removeClass("open");
  // Open the submenu that has been clicked
  $(this).find(".dropdown-two").toggleClass("open");
});

li ul {
  display: none;
}

.dropdown-one.open {
  display: block;
}

.dropdown-two.open {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Profile</li>
  <li>Edit</li>
  <li class="dropdown-trigger1"> <a href="#"> See your products</a>
    <ul class="dropdown-one">
      <li class="dropdown-trigger2"> <a href="#"> Mens </a>
        <ul class="dropdown-two">
          <li> <a href="#"> jumpers </a> </li>
          <li> <a href="#"> t shirts </a> </li>
        </ul>
      </li>
      <li class="dropdown-trigger2"> <a href="#">Womens</a>
        <ul class="dropdown-two">
          <li> <a href="#"> hoodies </a> </li>
          <li> <a href="#"> leggings </a> </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 3

您尚未描述如何激活每个子菜单，因此我将抽象地描述解决方案。解决方案基于您的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' });
});

如何在嵌套列表中切换<li>

3 个答案: