旋转字体 - 真棒图标180deg内置下拉按钮 [英] Rotate Font-Awesome Icon 180deg Inside Dropdown Button

问题描述

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

I've created some custom button styles and turned them into dropdowns using bootstraps dropdown classes. When I click the buttons, I want the font-awesome icon inside to rotate 180 degrees while the dropdown is open, and to rotate 180 degree the opposite way, back to it's original position, after the button loses active/focus.

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

The code I've been able to right rotates the icon 180deg, pointing it up. But I can't get it to rotate back down. Also, I have these 2 css classes. I've been leaving them commented out because activating them only adds a weird fade effect. Code is below..

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：
我已经将这些课程注释掉了因为它们让一切都变得奇怪..

JS: I've been this with the classes commented out because they make everything weird..

$('.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的方法。

Thanks in advance for any answers! jQuery always seems to give me issues or maybe I'm combining too many methods of rotating this idk.

推荐答案

实际上，你可以使用bootstrap Class。你不必编写额外的jquery代码。

Actually, you can do it with bootstrap Class.You don't have to write extra jquery code.

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

Did you notice that when the dropdown is open it has an extra class (open)? So when .dropdown has class .open(like .dropdown.open) then you add extra rule to the .icon-rotates (like .dropdown.open .icon-rotates).

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

这篇关于旋转字体 - 真棒图标180deg内置下拉按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！