**您好，我的菜单无法正常工作，无法弄清楚原因。它应该是这样工作的:当您单击菜单图标时，该图标会从一个汉堡包变成一个十字。
我的 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;
}
最佳答案
由于您的.line 类是绝对定位的，您的.menu 没有任何尺寸，因此无法点击。如果你给 .menu 尺寸，它可以被点击。
请参阅此 fiddle :http://jsfiddle.net/h0an7ojx/7/
澄清对伪元素动画的支持。过去，webkit 浏览器在动画伪元素方面存在问题。 According to the research I carried out ，这是固定的。然而，似乎大约一年前(2014 年初)，这个修复被逆转了。这个问题在闪烁浏览器中似乎也很明显。因此，对于 x 浏览器支持，伪元素动画应该真正避免。
即使有支持，此示例中的伪元素也可以位于文档流之外，因此不会始终响应点击事件。
关于jquery - 我的伪元素动画不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28393772/