需要Jquery帮助 - 2点击2个功能

Question

我有一个汉堡包菜单。这就是它的样子：

<input type="checkbox" id="toggle">
    <label for="toggle" class="bigmac">&#x2630;</label>

我在图标上使用了一个符号。我想在点击其他图标，十字架时更改图标。当我再次点击时，关闭菜单，将其改回汉堡包。

我尝试了很多，但不知道如何使用“切换”来做到这一点。

这是我在jquery中将它改为十字架的原因：

$( ".bigmac" ).click(function(){
    $( ".bigmac").html("✕")
})

但是如何再次点击时让它改变回来？

Answer 1

尝试使用css设置样式的样式，并在单击时将活动类添加到按钮。 例如（尚未测试）：

$("#btn").click(function(){
    if ($("#btn").hasClass("active")) {
        $("#btn").removeClass("active");
    }
    else {
        $("#btn").addClass("active");
    } 
})

Answer 2

您可以在cross元素中添加一个类.bigmac，以便您可以相应地设置if-else条件以获得切换效果：

$( ".bigmac" ).click(function(){
   if($(".bigmac").hasClass('cross')){
     $(".bigmac").html("☰").removeClass('cross');
   } else {
     $(".bigmac").html("✕").addClass('cross');
   } 
})

.cross{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="toggle">
<label for="toggle" class="bigmac">&#x2630;</label>

Answer 3

为什么不使用toggle。

＆＃13;

＆＃13;

$('.bigmac').toggle(function() {
    $(this).text('☰');
  },
  function() {
    $(this).text('✕');
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="toggle">
<label for="toggle" class="bigmac">&#x2630;</label>

＆＃13;

＆＃13;

＆＃13;