.hover函数转换，然后转换到十字架的.click函数，必须单击该十字转换回来（自定义汉堡菜单）

Question

想要创建一个悬停功能转换，然后一个点击功能转换到一个十字架，必须点击转换回来（自定义汉堡菜单）...如果你可以帮助，谢谢你！

---

 $("#wrapper").hover(function() {
    $(".menu").toggleClass("transition");
  });

$("#wrapper").click(function() {
  $(".transition").toggleClass("close");
});

.main-item {
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.line {
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  border-radius: 2px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
  background: black;
}

.line01 {
  top: 33.3%;
  width: 100%;
  left: 0;
}

.line02 {
  top: 66.6%;
  width: 65%;
  right: 0;
}

.menu.transition .line01 {
  width: 65%;
}

.menu.transition .line02 {
  width: 100%;
  top: 66%;
}

.transition.close .line01 {
  transform: rotate(45deg);
  top: 49%;
  width: 100%;
}

.transition.close .line02 {
  transform: rotate(-45deg);
  top: 49%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="main-item menu">
    <span class="line line01"></span>
    <span class="line line02"></span>
  </div>
</div>

Answer 1

使用CSS进行悬停并仅使用JS保留click事件：

$(".menu").click(function() {
  $(this).toggleClass("close");
});

.main-item {
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.line {
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  border-radius: 2px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
  background: black;
}

.line01 {
  top: 33.3%;
  width: 100%;
  left: 0;
}

.line02 {
  top: 66.6%;
  width: 65%;
  right: 0;
}

.menu:hover .line01 {
  width: 65%;
}

.menu:hover .line02 {
  width: 100%;
  top: 66%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
  width: 100%;
}

.menu.close .line02 {
  transform: rotate(-45deg);
  top: 49%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="main-item menu">
    <span class="line line01"></span>
    <span class="line line02"></span>
  </div>
</div>