如何遍历DOM以slideToggle元素？

Question

当我选择一个链接时，我试图让子无序列表向下滑动，但似乎无法使它工作。显然，我需要它以（这个）为目标，因为我会有很多sub ul's。                                                     

                                
• 关于                                     
                                          
  • 我们的服务
                                          
  • 物流
  
                                      
                                  
                            

                         

$('nav ul li').addClass('show-icon');
$('nav > ul li').on('click', function (e) {
     $(this).toggleClass('open-sub').find('ul > li ul').slideToggle(200);
});

Answer 1

将您的选择器更改为：

$('nav ul li').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass('open-sub').find("> ul").slideToggle(200);
}); //---this should also be changed----^^^^^

ul ul {
  display: none;
}
li a {
  color: blue;
}
.open-sub > a {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="" title="">About</a>
      <ul>
        <li><a href="" title="">Our Services</a>
        </li>
        <li><a href="" title="">Logistics</a>
          <ul>
            <li><a href="" title="">Logistics Services1</a>
            </li>
            <li><a href="" title="">Logistics Services2</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

此选择器$('nav > ul li')只绑定导航元素的直接子节点的click事件。相反，你应该绑定每个li元素。

如果代码说话，那么这个选择器$('nav > ul li')会大喊：

1. 获取每个导航元素。
2. 找到第一级ul元素。
3. 将事件与找到的li
的ul元素绑定