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

Question

我目前正在一个网站上工作，我正在尝试使用一段 JS 代码来改进导航，我只想要一个（如您在 CSS 中看到的那样）以度数为单位的转换.line-top class 和.line-bottom class，同时使.line-middle class 的不透明度为0；但由于某种原因，转型不会改变。我相信这可能与 CSS 部分有关：.line-top.is-open、.line-middle.is-open 和 .line-bottom.is-open and .is-closed 部分，也许 JS 无法调用它，或者它没有正确编码以理解动画：line-top-out 600ms linear normal；动画填充模式：转发；代码的一部分。代码如下：

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

添加这个脚本

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

Answer 2

class名称中有错别字，更改classes 的选择器有误；它应该在 .line- classes 而不是容器上完成。这是因为在 CSS 中，.is-open 和 .is-closed classes 附加了 .line- classes 而不是容器 class.

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

Link to 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");
        }
    });
});

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

Navigation - Burger Icon not transforming. Possible CSS or JS error

html

javascript

css

hamburger-menu