Question

我已经创建了一些自定义按钮样式，并使用bootstraps下拉类将它们转换为下拉列表。当我点击按钮时，我希望里面的字体超棒图标在下拉打开时旋转180度，并且在按钮失去活动/焦点后以相反的方式旋转180度，回到它的原始位置。

我已经能够正确旋转图标180deg，将其指向上方。但我无法让它旋转回来。另外，我有这两个css类。我一直把它们注释掉，因为激活它们只会增加一种奇怪的淡化效果。代码如下..

HTML：

<div class="dropdown">
          <a id="dropdown1" class="hlo-btn-round-dropdown dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" tabindex="1">Dropdown <i class="fa fa-chevron-down fa-color icon-rotates" aria-hidden="true"></i></a>
          <ul class="dropdown-menu" aria-labelledby="dropdown1">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>

</div>

CSS：

.icon-rotates {
  -moz-transition: all 1s linear;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}

.icon-rotates.rotate {
  -moz-transition: rotate(180deg);
  -webkit-transition: rotate(180deg);
  transition: rotate(180deg);
}

JS：我已经把这些课程注释掉了，因为它们让一切都变得奇怪......

$('.hlo-btn-round-dropdown').click(function(){

  if($(this).css("transform") == 'none') {
    $(this).children().css('transform', 'rotate(180deg)');
  } else {
    $(this).children().css('transform', 'none');
  }

});

提前感谢您的任何答案！ jQuery似乎总是给我提出问题，或者我可能会结合太多旋转这个idk的方法。

Answer 1

实际上，您可以使用bootstrap Class来完成它。您不必编写额外的jquery代码。

您是否注意到当下拉列表打开时，它有一个额外的类（打开）？因此，当.dropdown具有类.open（如.dropdown.open）时，则会向.icon-rotate添加额外的规则（如.dropdown.open .icon-rotate）。

.icon-rotates {
  -moz-transition: all 1s linear;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}

.icon-rotates.rotate {
  -moz-transition: rotate(180deg);
  -webkit-transition: rotate(180deg);
  transition: rotate(180deg);
}


.dropdown.open .icon-rotates {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<div class="dropdown">
		<a id="dropdown1" class="hlo-btn-round-dropdown dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" tabindex="1">Dropdown <i class="fa fa-chevron-down fa-color icon-rotates" aria-hidden="true"></i></a>
		<ul class="dropdown-menu" aria-labelledby="dropdown1">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="#">Separated link</a></li>
		</ul>

	</div>

Answer 2

由于您使用的是bootstrap，因此您可以捕获下拉列表的hiddden.bs.dropdown事件，以找出下拉菜单何时关闭并将图标旋转回正常位置 -

$(".dropdown").on("hidden.bs.dropdown", function(){
    $(this).find('.hlo-btn-round-dropdown').children().css('transform', 'none');
});

这是一个有效的JSFiddle，可以看到这一点 - https://jsfiddle.net/schikara/qre4wpcb/1/

旋转字体 - 真棒图标180deg内置下拉按钮

2 个答案: