JQuery/JS onclick 更改点击链接内元素的类

Question

我有几个使用引导程序的下拉菜单，我想编写一个简单的函数来更改单击的链接内的 span 元素的类。

澄清一下...这是我拥有的HTML 的示例：

<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false"
    onclick="toggleIcon()">
    <span class="glyphicon glyphicon-knight"></span>
    Drop Down Title
    <span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
   <!-- content -->
</div>

我正在寻找一个函数（使用JS 或JQuery），它可以切换第二个跨度类以在glyphicon glyphicon-triangle-bottom 和glyphicon glyphicon-triangle-top 之间切换。

请记住，此功能必须适用于多个下拉菜单。任何帮助将不胜感激。

Answer 1

$('a[data-toggle="collapse"]').click(function() {
  $(this)
    .find('.glyphicon-triangle-bottom, .glyphicon-triangle-top')
    .toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
});

同时删除onclick="toggleIcon()"

这应该适用于所有具有data-toggle="collapse" 属性的锚标记。

Answer 2

相当简单 - 最好使用 $.click() 函数并正确设置类：

<a data-toggle="collapse" class="toggle-icon" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="icon-toggle glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>

我在这里所做的是将 toggle-icon 类添加到顶部链接，并将 icon-toggle 类添加到字形图标的跨度。 .JS如下：

// On Toggle-Icon Click
$('.toggle-icon').click(function(){
// Set Icon To toggle in function
var IconToToggle = $(this).find('.icon-toggle');
// If the icon is the bottom icon
if (IconToToggle.hasClass('glyphicon-triangle-bottom')) {
// Change the icon to the top icon
IconToToggle.removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
// Otherwise
} else {
// Change the top icon to the bottom icon
IconToToggle.removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom');
}
})

添加了注释，以便您更好地阅读代码。希望这会有所帮助！

https://jsfiddle.net/khxehd05/

Answer 3

$(function(){
  $('#checkcls').click(function(){
  
  if($('#tglcls').hasClass('glyphicon-triangle-bottom')){
    $('#tglcls').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
    //to check class
    alert($("#tglcls").attr('class'));
  }
  else{
      $('#tglcls').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-top');
    //to check class
    alert($("#tglcls").attr('class'));
    }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" id='checkcls'>
    <span class="glyphicon glyphicon-knight"></span>
    Drop Down Title
    <span class="glyphicon glyphicon-triangle-bottom" id='tglcls'></span>
</a>
<div class="collapse" id="collapse-panel">
   <!-- content -->
</div>

希望对你有帮助。

Answer 4

到目前为止，我认为这里的答案只是温和的（以我的拙见）。花点时间阅读：

Decoupling Your HTML, CSS, and JavaScript

我会改变一些东西，让它看起来真正可读和可维护：

HTML：

<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false">
  <span class="glyphicon glyphicon-knight"></span>
  Drop Down Title
  <span class="glyphicon glyphicon-triangle-bottom hide-on-expanded"></span>
  <span class="glyphicon glyphicon-triangle-top hide-on-collapsed"></span>
</a>
<div class="collapse" id="collapse-panel">
 <!-- content -->
</div>

css:

[data-toggle="collapse"][aria-expanded="false"] .hide-on-collapsed{
  display: none;
}

[data-toggle="collapse"][aria-expanded="true"] .hide-on-expanded{
  display: none;
}

Working JsFiddle Example

1. 我强烈建议您不惜一切代价避免使用内联函数。 (onclick="toggleIcon()")
2. 只需编写 html 和 css，即可充分利用 CSS 和 Bootstrap 的优势！
3. 完全可重复使用，不管您使用什么字形，不需要 javascript，没有任何事件或类的硬编码。