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

Question

我有一份汉堡菜单。这是它的样子：

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

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

我尝试了很多，但不知道如何使用 "toggle"。

这是我在 jquery 中将其更改为十字架的内容：

$( ".bigmac" ).click(function(){
    $( ".bigmac").html("&#x2715;")
})

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

Answer 1

尝试使用 css 设计您的按钮样式，并在点击时向按钮添加活动 class。例如（尚未测试）：

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

Answer 2

您可以在.bigmac元素中添加class cross，这样您就可以相应地设置if-else条件来获得切换效果：

$( ".bigmac" ).click(function(){
   if($(".bigmac").hasClass('cross')){
     $(".bigmac").html("&#x2630;").removeClass('cross');
   } else {
     $(".bigmac").html("&#x2715;").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。

$('.bigmac').toggle(function() {
    $(this).text('&#x2630;');
  },
  function() {
    $(this).text('&#x2715;');
  });

<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>

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

Jquery help needed - 2 Clicks 2 functions

jquery

click

hamburger-menu