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

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>

我想让我的.schliessen标签在我点击.Hamburger标签的时候旋转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 从第一次点击 Hamburger 开始就没有获得新值。为了克服这个问题，我在点击时添加和删除了类。

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

这是工作代码：

codepen.io/emmeiWhite/pen/XWjBXRY?editors=1111

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

How to rotate hamburger menu icons on click

html

css

jquery

hamburger-menu