Question

我设置了一个响应式菜单，在480px或更低的情况下，菜单将折叠并显示一个按钮以点击并导致菜单下拉。我遇到的问题是，菜单将切换下来并立即切换回来。它不会保持开放。我在js处理程序类中添加了一个名为.nav-expanded的css，以便在切换后运行，以便在将屏幕打开到480px的较大尺寸时显示完整菜单。如果我从样式表中删除css，或者从js中删除代码，当我将页面缩小到480px或更小时，新菜单显示正确，我可以切换打开然后关闭。但是，一旦我切换关闭并扩大我的浏览器，除非我刷新浏览器，否则菜单将保持隐藏状态。

页面在http://skeeterz71.com/gothic/

我的js代码：

jQuery(document).ready(function(){

    jQuery(".menu-trigger").click(function(){

        jQuery("#first-nav").slideToggle(400, function(){

            jQuery(this).toggleClass("nav-expanded").css('display', '');

        });

    });

});

样式表媒体查询中的CSS

.nav-expanded{
    display:block;
}

Answer 1

您可以在jQuery代码中添加此css：

jQuery(this).toggleClass("nav-expanded").css('display', 'block');

Answer 2

.nav-expanded的CSS未被应用，因为#first-nav样式覆盖了它。

要赋予.nav-expanded更高的特异性，请添加以下内容

#first-nav.nav-expanded {
  display: block;
}

JS切换事件触发器无法正常工作

2 个答案: