jQuery不删除活动类

Question

单击移动导航并且内容消失后，我试图使链接在页面上向下滑动，因此仅显示链接。 我已经基本解决了这个问题，但是当我再次单击mobilenav时，.displayNone类不会被删除，我对为什么有些困惑。

$(document).ready(function() {
    $('#hamburger').on('click', function(){
      $('.links').slideToggle(200);
      var status = $('.wrapper').hasClass('.displayNone');
      if(status){ $('.wrapper').removeClass('.displayNone'); }
      else { $('.wrapper').addClass('displayNone'); }
    });

  });

这一切都是新手。 有没有明显的人可以看到这个错误？

Answer 1

使用toggleClass() ，

$('.wrapper').toggleClass('displayNone'); 

而且，jQuery的xxxClass()函数期望类的名称，而不是选择器的名称，因此不要使用. 类选择器。

Answer 2

添加/删除类时，只需使用displayNone ，而不要使用.displayNone （请注意圆点！）。

另外，还有一个toggleClass()函数可以使您免于执行status ，这意味着您只需要

$('.wrapper').toggleClass('displayNone');

Answer 3

你做错了

var status = $('.wrapper').hasClass('.displayNone');

当您使用hasClass, addClass or removeClass则不需要使用“。”。 类名前加点。

所以正确的方法是

var status = $('.wrapper').hasClass('displayNone');

更正后的代码

$(document).ready(function() {
  $('#hamburger').on('click', function() {
    $('.links').slideToggle(200);
    var status = $('.wrapper').hasClass('displayNone');
    if (status) {
      $('.wrapper').removeClass('displayNone');
    } else {
      $('.wrapper').addClass('displayNone');
    }
  });
});

Answer 4

您可以使用 ：

$('.wrapper').toggleClass("displayNone");

最终代码：

$(document).ready(function(){

    $('#hamburger').on('click', function(){

        $('.links').slideToggle(200);

        $('.wrapper').toggleClass("displayNone");

    })

})