jQuery/JS onclick 更改单击链接内元素的类

Question

我有几个使用 bootstrap 的下拉菜单，我想在一个简单的函数中进行编码，以更改单击的链接内的 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

到目前为止，我认为这里的答案还算可以（以我的拙见）。 花点时间阅读：

解耦 HTML、CSS 和 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;
}

工作 JsFiddle 示例

1. 我强烈建议您不惜一切代价避免使用内联函数。 (

   onclick="toggleIcon()"

   )
2. 只需编写 html 和 css，即可利用 CSS 和 Bootstrap 已经完成的功能！
3. 完全可重用，不关心您使用什么字形，不需要 JavaScript，事件或类方面没有任何硬编码。