jquery - 响应式设计，在移动 View 的下拉列表中显示静态列表

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

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

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

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