当用户单击链接时,我正在尝试将.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');
});
});
在您的情况下,$(this)
指的是.panelarrow
,并且您正在尝试在该.panelarrow
中find
span
元素。
溶液:
$(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');
});
});
单击跨度(包括字形(将允许您使用"this"来指代跨度 - 然后切换类可以包含在一个命令中:
$(document).ready(function(){
$('.panelarrow').click(function(){
$(this).toggleClass('glyphicon-menu-down glyphicon-menu-up');
});
});