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

JS toggle event trigger not working correctly

本文关键字：常工作 工作 事件 触发器 JS      更新时间：2023-09-26

我已经设置了一个响应式菜单，在 480px 或更小的菜单上，菜单将折叠并显示一个按钮单击并导致菜单下拉。我遇到的问题是，菜单将向下切换并立即切换回来。它不会保持打开状态。我在名为 .nav-expand 的 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;
}

你可以在 jQuery 代码中添加这个 css：

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

.nav-expanded的CSS没有被应用，因为#first-nav样式正在覆盖它。

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

#first-nav.nav-expanded {
  display: block;
}
相关文章：