更改字体真棒箭头子菜单答案

【问题标题】：Change font-awesome arrow submenu更改字体真棒箭头子菜单
【发布时间】：2016-11-16 14:01:02
【问题描述】：

我想在子菜单打开时将 font-awesome 更改为 fa-angle-down 并在子菜单折叠时放回 fa-angle-left。

HTML 和 CSS：

.sidenav li .arrow:before {
    font-size: 1.4em;
    padding-left: 10px;
    padding-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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"/>

<li data-toggle="collapse" data-target="#SubMenuTools" class="collapsed">
    <a href="#/"><i class="fa fa-tasks fa-fw"></i> External Tools <span class="arrow pull-right fa fa-angle-left"></span></a>
</li>
<ul class="sub-menu collapse" id="SubMenuTools">
    <li><a href="">First tool</a></li>
    <li><a href="">Second Tool</a></li>
</ul>

怎么做？应该在 CSS 中还是在 jQuery 中？

【问题讨论】：

标签： jquery html twitter-bootstrap font-awesome submenu

【解决方案1】：

您可以将transform 与transition 配对使用。这将产生比使用 JS 简单地将 .fa-angle-left 替换为 .fa-angle-down 更好的效果。

.sidenav li .arrow {
  transition: transform .25s;
}

.sidenav li.collapsed .arrow {
  transform: rotate(90deg);
}

看看这支笔：http://codepen.io/ptrkcsk/pen/PbGbXW

【讨论】：

是的，纯 CSS 解决方案。谢谢:)

【解决方案2】：

使用 jQuery：

$('a').on('click', function() {
  var expanded = $('#SubMenuTools').hasClass("in");
  if (expanded == true) {
    $('#arrow').removeClass("fa-angle-down");
    $('#arrow').addClass("fa-angle-left");   
  }
  else {
    $('#arrow').removeClass("fa-angle-left");
    $('#arrow').addClass("fa-angle-down");   
  }
});

.sidenav li .arrow:before {
  font-size: 1.4em;
  padding-left: 10px;
  padding-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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"/>

<li data-toggle="collapse" data-target="#SubMenuTools" class="collapsed">
  <a href="#/">
    <i class="fa fa-tasks fa-fw"></i> 
    <span>External Tools</span> 
    <i class="fa fa-angle-left" id='arrow'></i>
  </a>
</li>
<ul class="sub-menu collapse" id="SubMenuTools">
  <li><a href="">First tool</a>
  </li>
  <li><a href="">Second Tool</a>
  </li>
</ul>

【讨论】：

【解决方案3】：

您可以使用以下 JQuery 示例。

$(document).ready(function() {
  var expand = false;
  $("#mainMenu").click(function() {
    expand = !expand;
    if (expand) {
      $(this).children("span").removeClass().addClass("fa fa-angle-down");
    } else {
      $(this).children("span").removeClass().addClass(" fa fa-angle-left");
    }
  });
});

DEMO HERE

【讨论】：