jquery - 响应式设计，移动视图下拉列表显示静态列表

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 screen 属性，但我假设这样的东西需要jquery？

我的问题是，我将如何实现这样的目标？

谢谢你

Answer 1

假设您有一个按钮，您将其隐藏在超过 520 像素宽度的屏幕分辨率中。

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

当您单击 时，它将在#accordian 中切换您的所有 ul 元素。