Question

**您好，我的菜单自动无法正常工作，无法找出原因。它应该像这样工作：当你点击菜单图标时，图标会从汉堡变成十字架。

我的HTML就是这样： **

    <body>
     <div class="menu">
      <div class="line"></div>
    </div>
    <script>$('.menu').click(function(){
      $this = $(this);
      if ($this.hasClass('active')) {
        $this.removeClass('active');
      }
      else {
        $this.addClass('active');    
      }

    });</script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>

我的CSS是这样的：

.menu {
  position: absolute; 
  height: 40px;
  width: 40px;
  cursor: pointer;
  top: 3%;
  left: 95%;
  z-index: 999;
}
.line {
  height: 5px;
  width: 40px;
  background: red;
  position: absolute;
  top: 50%;
  transition: all 250ms linear;

}
.line:after, .line:before {
  content: ' ';
  height: 5px;
  width: 40px;
  background: red;
  position: absolute;
  transition: all 250ms linear;
}
.line:before {
  top: -10px;
}
.line:after {
  bottom: -10px;
}
.menu.active .line {
    background: transparent;
}
.menu.active .line:before {
    background: red;
    transform: rotate(-405deg);
    top: 0px;
}
.menu.active .line:after {
     background: red; 
    transform: rotate(405deg);
    bottom: 0px;
}

Answer 1

由于您的.line课程绝对定位，因此.menu没有任何尺寸，因此无法点击。如果您提供.menu尺寸，则可以点击它。

看到这个小提琴：http://jsfiddle.net/h0an7ojx/7/

澄清对伪元素动画的支持。从历史上看，webkit浏览器在设置动画伪元素方面存在问题。 According to the research I carried out，这是固定的。然而，它似乎在一年前（2014年初），这个修复被逆转。在眨眼浏览器中，这个问题似乎也很明显。因此，对于x-browser支持，应该真正避免使用伪元素动画。

即使有支持，此示例中的伪元素也可以位于文档流之外，因此，并不总是响应单击事件。

Answer 2

您在加载前使用JQuery 。因此，请更改您的加载顺序，事情应该正常工作

我的伪元素动画无效

2 个答案: