如何在点击时旋转汉堡菜单图标

Question

我的汉堡菜单有问题，尤其是图标。我的HTML如下所示：

<input type="checkbox" id="check"/>
<header class="IndexHeader">
<nav class="navigation">
<label class="Hamburger" for="check">&#9776;</label>
<label class="schliessen" for="check">&#9932;</label>
<ul class="IndexNavliste">
a list...
</ul>  
</nav>            
</header>

当我单击.Hamburger标签时，我希望我的.schliessen标签旋转180度，这样它就像一个动画效果。我用jQuery:这样试过

$(".Hamburger").click(function(){
$(".schliessen").css("transform","rotate(180deg)");
});

这对我来说并不奏效。此外，我认为我需要一个过渡，这样当我点击标签时才能真正看到它。我也试着直接在CSS中做这件事，所以当我的复选框被选中时。这很有效，但我看不到动画，在那之后我的悬停效果也不起作用了。。。

.Hamburger{
display: block;
transition: 500ms;
}
.schliessen{
transition: 500ms;
}
.schliessen:hover{
color: black;
}
#check:checked + .IndexHeader .navigation .Hamburger{
display: none;
}
#check:checked + .IndexHeader .navigation .schliessen{
display: block;
transform: rotate(180deg);
}

Answer 1

transition和transform:rotate("180deg")的问题之所以出现，是因为transform从第一次点击汉堡开始从未获得新值。为了克服这一点，我在点击时添加和删除了类。

还删除了不必要的CSS，并添加了这个问题所需的内容：

这是工作代码：

codepen.io/emeiWhite/pen/XWjBXRY？编辑器=1111