javascript - 为什么我的 jquery 切换类在单击时不起作用

Question

我正在使用一个 jquery 函数来实现图标的切换效果，所以当我单击该图标时，div 将向左移动并隐藏。所以只有图标会显示在页面上，当我再次单击该图标时div会出现从左边滑动我能实现功能但是下面的功能

$(document).ready(function() {
  $(".demo-icon").click(function() {
    if ($('.demo_changer').hasClass("active")) {
      $(".demo_changer").animate({
        "left": "-208px"
      }, function() {
        $('.demo_changer').toggleClass("active");
      });
    } else {
      $('.demo_changer').animate({
        "left": "0px"
      }, function() {
        $('.demo_changer').toggleClass("active");
      });
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo_changer" style="padding-top:13px">
  <div class="demo-icon customBgColor">
    <i class="fa fa-bullhorn fa-spin fa-2x"></i>
  </div>
  <div class="form_holder">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="predefined_styles">
          <div class="skin-theme-switcher">
            <a href="campaign.html" target="_blank">
              <h4>some text</h4>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

感谢您提前回复。

Answer 1

刚发现你没有添加类active虽然页面加载但仍显示 div。

修改下面一行

<div class="demo_changer" style="padding-top:13px">

作为

<div class="demo_changer active" style="padding-top:13px">

加载时，您的网页显示 div 但没有类 active在 div 标签中第一次点击时，根据您的脚本，它发现没有 active标签中的类，然后添加类 active你的 div 已经可见了......我希望你明白......

---

问题可能在于，<div class="row"> 中的边距与图标 div 重叠，这可能是点击该区域不会触发“点击”事件的原因——见下图

尝试添加 css 样式，如下图所示 -