Изменение функции бутстрапа glyphicon onclick

Question

Я пытаюсь поменять .glyphicon-menu-down на glyphicon-menu-up, когда пользователь нажимает на ссылку. Что я делаю не так? Это не работает. Я пропустил jquery?

Markup

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

Script

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

Answer 1

В вашем случае $(this) относится к .panelarrow и вы пытаетесь findspan элемент внутри этого .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) позволит вам используйте «это» для обозначения пролета - тогда в одну команду могут быть включены классы переключения:

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