切换引导图标栏动画的jQuery函数不起作用

jQuery Function to Toggle Bootstrap Icon Bar Animation Does Not Work

本文关键字：jQuery 函数 不起作用 动画 图标      更新时间：2023-09-26

我在切换按钮上设置了一个功能，可以在单击时将引导图标栏转换为"X"形状。然而，这似乎不起作用。非常感谢任何帮助。按下它，结果什么也没有。下面是一个简单示例的CSS: 

$(document).ready(function () {
              $(".pro-toggle").on("click", function () {
                    $(".top-bar").toggleClass("active");
              });
        });
.pro-toggle .active .top-bar {
.pro-toggle.top-bar {
  transform: rotate(0);
}
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="navbar-toggle collapsed pro-toggle pull-left" data-toggle="collapse">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>

.pro-toggle .active .top-bar

你的jQuery正在切换.top-bar元素上的类，但它与你的CSS规则不匹配。

设置.active类为.top-bar元素，如下所示

CSS 

.pro-toggle .top-bar {
  transform: rotate(0);
}
.pro-toggle .top-bar.active 
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

LESS/SASS

.pro-toggle .top-bar {
  transform: rotate(0);
  &.active {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
}

检查https://jsfiddle.net/bq794gL7/你的css可能有问题吗?

  .pro-toggle.top-bar {
     transform: rotate(0);
  }
  .pro-toggle  .top-bar.active {
     transform: rotate(45deg);
     transform-origin: 10% 10%;
   }
相关文章：