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");

    })

})

JQuery没有删除活动类

4 个答案: