Javascript 导航-汉堡图标未转换。可能的CSS或JS错误

我目前正在一个网站上工作，我正试图用一段JS代码来调整导航，我只想用.line top类和.line bottom类的度数进行转换，同时使.line middle类的不透明度为0；但由于某种原因，这种转变不会改变。我相信这可能与CSS部分有关：.line-top.is-open、.line-middle.is-open和.line-bottom.is-open以及.is-closed部分，可能JS无法调用它，或者它没有正确编码以理解动画：line-top-out 600ms线性法线；动画填充模式：正向；代码的一部分。多年来一直在试验/研究，请帮助！！！代码如下：

HTML:

   <div class="container_button_small">
    <div class="line-top"></div>
    <div class="line-middle"></div>
    <div class="line-bottom"></div>
   </div>

JS:

请添加此脚本

$(function() {
         $(".container_button_small").on("click", function() {
          var that = $(".line-top,.line-middle,.line-bottom");   
        if (that.hasClass("is-open")) {
         that.removeClass("is-open").addClass("is-closed");      
        } else {
           that.removeClass("is-closed").addClass("is-open");      
               }    
       });
    });

---

类名中有一个输入错误，更改类的选择器是错误的；它应该在

行-

类上完成，而不是在容器上完成。这是因为在CSS中，

是打开的

和

是关闭的

类附加了

行-

类，而不是容器类

$(function() {
    var lines = $('.line-top, .line-middle, .line-bottom');
    $(".container_button_small").on("click", function() {
        var that = $(this);
        if (lines.hasClass("is-open")) {
            lines.removeClass("is-open").addClass("is-closed");
        } else {
            lines.removeClass("is-closed").addClass("is-open");
        }
    });
});

您还可以通过使用箭头功能来避免“this”黑客攻击：

$(function() {
    var lines = $('.line-top, .line-middle, .line-bottom');
    $(".container_button_small").on("click", () => {
        //var that = $(this);
        if (lines.hasClass("is-open")) {
            lines.removeClass("is-open").addClass("is-closed");
        } else {
            lines.removeClass("is-closed").addClass("is-open");
        }
    });
});

---

谢谢你的评论/帮助，我现在就来试试。嗨，我尝试了Javascript的两个片段，没有任何乐趣，我已经阅读并理解了你提供的脚本，CSS有什么我可以更改的吗？谢谢你的评论/帮助，我现在就来试试。嗨，我尝试了Javascript，没有乐趣，我已经阅读并理解了你提供的脚本，CSS有什么我可以改变的吗？

$(function() {
    var lines = $('.line-top, .line-middle, .line-bottom');
    $(".container_button_small").on("click", function() {
        var that = $(this);
        if (lines.hasClass("is-open")) {
            lines.removeClass("is-open").addClass("is-closed");
        } else {
            lines.removeClass("is-closed").addClass("is-open");
        }
    });
});

$(function() {
    var lines = $('.line-top, .line-middle, .line-bottom');
    $(".container_button_small").on("click", () => {
        //var that = $(this);
        if (lines.hasClass("is-open")) {
            lines.removeClass("is-open").addClass("is-closed");
        } else {
            lines.removeClass("is-closed").addClass("is-open");
        }
    });
});