Question

当用户点击链接时，我正在尝试将.glyphicon-menu-down交换为glyphicon-menu-up。我究竟做错了什么？它不起作用。我错过了使用jquery吗？

标记

  <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
              Admin
                <span class="panelarrow glyphicon glyphicon-menu-down pull-right"></span></a>

脚本

    $(document).ready(function(){
$('.panelarrow').click(function(){
    $(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
});
    });

Answer 1

在您的情况下，$(this)引用.panelarrow并且您正在find内尝试span .panelarrow元素。

解决方案：

$(document).ready(function() {
  $('.panelarrow').click(function(){
    $(this).toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
  });
});

或者，如果您想通过点击a元素来更改图标，请使用此选项：

$(document).ready(function() {
  $('[data-toggle="collapse"]').click(function(){
    $(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
  });
});

Answer 2

单击跨度（包括glyphicon）将允许您使用＆＃34;此＆＃34;引用跨度 - 然后切换类可以包含在一个命令中：

$(document).ready(function(){
  $('.panelarrow').click(function(){
    $(this).toggleClass('glyphicon-menu-down glyphicon-menu-up');
  });
});

更改bootstrap glyphicon onclick功能

2 个答案: