.addClass 和 .removeClass 方法的 Jquery 问题

Question

我正在尝试在页面上创建动态菜单，但无法让 jQuery 完成这项工作。代码将不言自明。

所以我有一个名为 .dead 的类，它在 css 中基本上是 display: none;，.header-main 是一个 div，.header-main-menu 这是我按下按钮时需要弹出的内容。

$(document).ready(function () {
    var trigger = $('a.header-main'),
    var mainstuff = $('.header-main'),
    var menustuff = $('.header-main-menu');

    function buttonSwitch() {
        mainstuff.addClass('.dead');
        menustuff.removeClass('.dead');
        trigger.click(function () {
            buttonSwitch();
        });
    }
});

当我单击按钮时，什么都没有发生。我是 jQuery 新手，所以感谢您抽出宝贵时间提供帮助。 :)

Answer 1

当您使用addClass() 或removeClass()（或toggleClass()）时，您不需要名称中的点。只需使用类名即可。

mainstuff.addClass('dead');
menustuff.removeClass('dead');

此外，当您选择元素时，请决定是否要结束每行或链选择。如果您将它们链接起来，请不要再次使用var。

这是有效的：

var trigger = $('a.header-main'),
mainstuff = $('.header-main'),
menustuff = $('.header-main-menu');

这也是有效的：

var trigger = $('a.header-main');
var mainstuff = $('.header-main');
var menustuff = $('.header-main-menu');

根据您的 HTML，您的触发器选择器不匹配任何内容，因此您必须修复它，即 $('.main-button > a')。 如果您想同时显示 html、css 和 js，请使用 codepen 或其他东西。