自適應設計，顯示在下拉列表中靜態列表中移動視圖

Question

我有一個項目像這樣的靜態列表：

<div id="accordian"> 
    <ul> 
     <li class="active"> 
      <p class="accordiontitle_two"><a href="/">Women Clothing</a></p> 
      <ul> 
       <li><a href="/women-coats/">Coats</a></li> 
       <li><a href="/women-dresses/">Dresses</a></li> 
       <li><a href="/women-jackets/">Jackets</a></li> 
       <li><a href="/women-jeans/">Jeans</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

我想在下拉列表中顯示這一點，如果屏幕寬度降到一定寬度的下方例如在移動瀏覽器上。我目前在CSS中使用@media屏幕屬性，但我假設像這樣需要jquery？

我的問題是，我將如何實現這樣的事情？

謝謝

Answer 1

假設您有一個按鈕，你的屏幕分辨率超過520px寬隱藏。

$("button").click(function() { 
     $("#accordian ul").toggle(); 
}); 

當你點擊它時，它會切換你所有的#accordian裏面的ul元素。