如何遍歷DOM來滑動元素？

Question

我想要得到的子無序列表滑下來，當我選擇一個鏈接，但似乎無法得到它的工作。顯然，我需要它的目標（這），因爲我會有很多sub ul的。

• 關於
  • 我們的服務
  • 物流
  
  

$('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。