Question

我有几个使用bootstrap的下拉菜单，我想在一个简单的函数中编码，以便在单击的链接中更改我的span元素的类。

澄清......这是我<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">  </div>的一个例子：

JS

我正在寻找一个功能（使用JQuery或glyphicon glyphicon-triangle-bottom），可以切换第二个span类，以便在glyphicon glyphicon-triangle-top和{{1}}之间切换。

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

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 类添加到glyphicon的范围中。 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

我强烈建议您不惜一切代价避免使用内联函数。（onclick="toggleIcon()"）
只需编写html和css，即可充分利用CSS和Bootstrap的功能！
完全可重复使用，不关心你使用什么字形，不需要javascript，没有任何东西在事件或类别方面都是硬编码。

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

4 个答案: