Question

我有一个简短的JS代码，应该添加和删除一个类。事实是，它添加了一个类，但从未删除它。我找不到问题。它应该通过单击同一按钮来添加和删除该类。

$('.hamburger').on('click', function(){
    if (!$(this).hasClass('opened')){
        $(this).addClass('.opened');
        $('.pop').css({'width' : '550px'});
        $('.main').css({'margin-right' : '550px'});
    }
    else{
        $(this).removeClass('opened');
        $('.pop').css({'width' : '0'});
        $('.main').css({'margin-right' : '0'});
    }
});

Answer 1

尝试使用Jquery的toggleClass方法，它将添加或删除类。

$('.hamburger').on('click', function(){
      $(this).toggleClass("main");
});

Answer 2

您不必在传递给$（this）.addClass的类字符串中添加点，因此它应该是：

$(this).addClass('opened');

Answer 3

删除“。”在$(this).addClass('.opened'); ==> $(this).addClass('opened');

中

对于样式类，您还可以使用 toggleClass （http://api.jquery.com/toggleclass/）

Answer 4

这是因为您要添加“ .opened”而不是打开。

也许看一下切换功能来清理代码。同样，每次运行都没有必要重新提取元素。

希望这对如何清理和减少重复的工作给了您一个好主意。

const pop = $('.pop'),
      main =  $('.main'),
      ham = $('.hamburger');

ham.on('click', toggleHamburger);

function toggleHamburger() {
   toggleMainStyles(!ham.hasClass('opened') ? '550px' : 0);
}

function toggleMainStyles(value = 0) {
    pop.css({ width: value });
    main.css({ marginRight: value });
    ham.toggleClass('opened');
}

.hamburger {
  color: blue;
}

.opened {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="hamburger">ham</div>

<div class="main"></div>

打开和关闭导航

4 个答案: