响应式设计，在移动视图的下拉列表中显示静态列表

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元素。