javascript - 更改 bootstrap glyphicon onclick 函数

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 并且您正在尝试查找 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');
  });
});