导航 - 汉堡图标未变换.可能的 CSS 或 JS 错误

Question

我目前正在一个网站上工作，并试图用一段JS代码来提升导航，我只想要一个(正如你在CSS中看到的那样(以.line-top类和.line-bottom类的程度进行转换，同时使.line-middleclass的不透明度为0;但由于某种原因，转换不会改变。我相信这可能与 CSS 部分有关：.line-top.is-open、.line-middle.is-open 和 .line-bottom.is-open 以及 .is-closed 部分，也许 JS 无法调用它，或者它没有正确编码来理解动画：行顶 600ms 线性法线;动画填充模式：向前;部分代码。代码如下：

.HTML：

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

.CSS：

.container_button_small {
  position: relative;
  height: 16px;
  width: 20px;
 cursor: pointer;
}

.line-top, .line-middle, .line-bottom {
    position: absolute;
    display: block;
    height: 2px;
    width: 20px;
    border-radius: 2px;
    background: #fff;
}
 .line-top {
   top: 0;
   transform-origin: 18px 1px;
 }
 .line-middle {
    top: 7px;
    transition: opacity 200ms linear;
 }
  .line-bottom {
    bottom: 0;
   transform-origin: 18px 1px;
 }

  .line-top.is-open {
     animation: line-top-out 600ms linear normal;
     animation-fill-mode: forwards;
  }
   .line-middle.is-open {
      opacity: 0;
   }
    .line-bottom.is-open {
       animation: line-bot-out 600ms linear normal;
       animation-fill-mode: forwards;
   }

    .line-top.is-closed {
       animation: line-top-in 600ms linear normal;
       animation-fill-mode: forwards;
   }
    .line-middle.is-closed {
       transition-delay: 200ms;
   }
    .line-bottom.is-closed {
       animation: line-bot-in 600ms linear normal;
       animation-fill-mode: forwards;
    }

     @keyframes line-top-in {
       0% {
       left: -5px;
       bot: 0;
      transform: rotate(-45deg);
     }
      20% {
      left: -5px;
      bot: 0;
      transform: rotate(-60deg);
     }
      80% {
      left: 0;
      bot: 0;
      transform: rotate(15deg);
      }
      100% {
        left: 0;
        bot: 1px;
       transform: rotate(0deg);
       }
     }
     @keyframes line-top-out {
       0% {
          left: 0;
          top: 0;
          transform: rotate(0deg);
       }
       20% {
        left: 0;
        top: 0;
        transform: rotate(15deg);
        }
        80% {
        left: -5px;
        top: 0;
        transform: rotate(-60deg);
         }
        100% {
        left: -5px;
        top: 1px;
       transform: rotate(-45deg);
         }
       }
      @keyframes line-bot-in {
       0% {
         left: -5px;
         transform: rotate(45deg);
          }
       20% {
         left: -5px;
         bot: 0;
         transform: rotate(60deg);
           }
       80% {
        left: 0;
        bot: 0;
        transform: rotate(-15deg);
           }
       100% {
        left: 0;
        transform: rotate(0deg);
       }
     }
     @keyframes line-bot-out {
       0% {
         left: 0;
         transform: rotate(0deg);
          }
       20% {
         left: 0;
         transform: rotate(-15deg);
            }
       80% {
         left: -5px;
         transform: rotate(60deg);
           }
       100% {
         left: -5px;
         transform: rotate(45deg);
        }
      }

.JS：

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

 

Answer 1

类名中有拼写错误，更改类的选择器是错误的;它应该在.line-类而不是容器上完成。这是因为在 CSS 中，.is-open 和 .is-closed 类与 .line- 类而不是容器类一起附加。

$(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");
        }
    });
});

链接到 JSFiddle

您还可以通过使用箭头函数来避免"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");
        }
    });
});

Answer 2

添加此脚本

$(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");      
               }    
       });
    });