jquery - 可根据要求打开响应式菜单

Question

我写了这个 js，所以菜单是响应式的，但在 js 未启用时不会中断。

我有 2 个菜单列表，每个列表都在它们自己的导航元素中。对于平板电脑和移动设备，我只希望显示一个菜单按钮（列表中的第一项），但在按下菜单按钮之前不显示列表。

目前第一个列表在打开页面时隐藏，但另一个列表永久显示。但是，单击任一菜单按钮与显示第一个列表的工作相同。nav 都没有 id 或类。

为什么只有一个列表响应？

这是 JS（它在头脑中）

function showLists() {
$('.nav').show();
$(".menu").hide();
}
$(document).ready(function() {
if ($(window).width() < 450) {
    $('.nav').hide();
    $(".menu").click(function () {(
        showLists()
        )})
    }
});

Answer 1

听起来好像您要进行基本的切换导航。Brad Frost 的 RWD Patterns是基本甚至更高级的响应式解决方案的一个很好的起点。

此外，在大多数解决方案中，您应该能够摆脱只定义一个导航列表并使用 CSS 和 JS 来操纵它以响应行为。