打开和关闭导航答案

【问题标题】：Opening and closing navigation打开和关闭导航
【发布时间】：2019-03-27 17:26:27
【问题描述】：

我有一个简短的 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'});
    }
});

【问题讨论】：

标签： javascript jquery css class

【解决方案1】：

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

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

【讨论】：

欢迎您，如果它对您有帮助，那么请在正确的标签上给出这个答案，以便它可以帮助其他人:)

【解决方案2】：

您不需要将点添加到传递给 $(this).addClass 的类字符串中，因此应该是：

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

【讨论】：

【解决方案3】：

去掉“.”在$(this).addClass('.opened'); ==> $(this).addClass('opened');

对于样式类，也可以使用toggleClass (http://api.jquery.com/toggleclass/)

【讨论】：

【解决方案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>

【讨论】：