javascript - "toggleClass()"工作不正常

Question

.toggleClass() 方法只是将“类”添加到我的选择中，所以单击时我得到的是:

<div id="toggle" class>
...

代替

<div id="toggle" class="on">
...

我一直在尝试解决这个问题大约 2 个小时，阅读了关于同一问题的帖子，但似乎与我的情况不同，尽管结果是。

Javascript 的第一步只是动画加载屏幕并隐藏它

$(function() {
  $(".loader_gif_wrapper").fadeOut(1000, function() {
    $(".slider").animate({
      width: ["0%", "swing"]
    }, 2000, function() {
      // Animation complete.
      $(".loader_page_wrapper").hide();
      // FIN ANIMACIONES LOADING


      $("#toggle").click(function() {
        $(this).toggleClass('on');
        //$("nav").toggle();
      });
    });
  });
});

#toggle {
  position: absolute;
  left: 3rem;
  top: 3rem;
  z-index: 10000;
  width: 40px;
  height: 40px;
  cursor: pointer;
  float: right;
  transition: all 0.3s ease-out;
  opacity: 1;
  visibility: visible;
}

#toggle .span {
  height: 3px;
  background: #ffffff;
  transition: all 0.3s ease-out;
  backface-visibility: hidden;
  margin: 5px auto;
  border: solid 1px $tres;
} //#toggle.on{
//    border: solid 0px $tres;}
#toggle.on #one {
  transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two {
  opacity: 0;
}

#toggle.on #three {
  transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="toggle">
  <div class="span" id="one">One</div>
  <div class="span" id="two">Two</div>
  <div class="span" id="three">Three</div>
</div>

Answer 1

您必须将事件声明放在回调之外，这样无论回调是否到达，您都可以确保在所有情况下都会附加该事件:

$(function() {
  $(".loader_gif_wrapper").fadeOut(1000, function() {
    $(".slider").animate({
      width: ["0%", "swing"]
    }, 2000, function() {
      // Animation complete.
      $(".loader_page_wrapper").hide();
    });
  });

  $("#toggle").click(function() {
    $(this).toggleClass('on');
    //$("nav").toggle();
  });
});

工作样本

$(function() {
  $("#toggle").click(function() {
    $(this).toggleClass('on');
  });
});

#toggle {
  position: absolute;
  left: 3rem;
  top: 2rem;
  z-index: 10000;
  width: 40px;
  height: 30px;
  cursor: pointer;
  float: right;
  transition: all 0.3s ease-out;
  opacity: 1;
  visibility: visible;
  background-color: green;
}

#toggle .span {
  height: 3px;
  background: #ffffff;
  transition: all 0.3s ease-out;
  backface-visibility: hidden;
  margin: 5px auto;
  border: solid 1px;
  border: solid 0px;
}

#toggle.on #one {
  transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two {
  opacity: 0;
}

#toggle.on #three {
  transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="toggle">
  <div class="span" id="one"></div>
  <div class="span" id="two"></div>
  <div class="span" id="three"></div>
</div>