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

Question

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

页面在这里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

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

要使 .nav-expanded 具有更高的特异性，请添加以下内容

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

Answer 2

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

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

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

JS toggle event trigger not working correctly

javascript

css

jquery

drop-down-menu