Question

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

＆＃13;

$(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");
      });
    }
  })
});

＆＃13;

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

＆＃13;

感谢您提前回复。

Answer 1

您需要对position: absolute;课程使用position: relative;或.demo_changer，以便为其位置设置动画。

＆＃13;

$(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");
      });
    }
  })
});

＆＃13;

.demo_changer {
  position: relative;
}

＆＃13;

<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">icon</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>

＆＃13;

Answer 2

刚发现你在页面加载时没有添加类active但是却显示了div。

更改以下行

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

作为

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

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

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

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

Answer 3

动画块需要额外的样式。

.demo_changer {
  position:relative
}

这是工作示例。

https://jsbin.com/xikamitole/1/edit?html,css,js,output

希望这有帮助。

Answer 4

试试这个：

$(document).on('click', '.demo-icon', 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");
      });
    }
  })
});

为什么我的jquery切换类不能单击

4 个答案: