时间戳

首页 > 解决方案 > 激活引导折叠时切换 Inline Chevron Down

javascript - 激活引导折叠时切换 Inline Chevron Down

问题描述

我不确定标题是否有意义，但从 PHP 中，我在一个循环中回显这个 HTML：

<a href='#' data-toggle='collapse' data-target='#myid'>
  <span class='fa fa-caret-down'></span>
</a>
<div id='myid' class='collapse'>Some Content</div>

我希望在单击时fa-caret-down更改为fa-caret-up，反之亦然。我希望代码是内联的，所以我可以在这个实例中输出它。我怎样才能做到这一点？

标签： javascriptjquerycsstwitter-bootstrap-3

解决方案

您可以将onClick内联事件添加到您的锚点并附加一个在类之间切换的函数，例如：

function toggleClass(self) {
  $('span', self).toggleClass('fa-caret-down fa-caret-up');
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href='#' data-toggle='collapse' data-target='#myid' onClick="toggleClass(this)">
  <span class='fa fa-caret-down'></span>
</a>
<div id='myid' class='collapse'>Some Content</div>

建议

最好在所有锚点中使用一个公共类，并将点击事件附加到这个公共类，例如：

<a href='#' data-toggle='collapse' data-target='#myid' class="icon_toggle">
    <span class='fa fa-caret-down'></span>
</a>
<div id='myid' class='collapse'>Some Content</div>

在您的 js 代码中，您应该附加使用 jQuery 方法在两个类之间切换的单击事件，toogleClass()例如：

$('body').on('click', '.icon_toggle', function(){
     $('span', this).toggleClass('fa-caret-down fa-caret-up');
});

推荐阅读