[英]Changing bootstrap glyphicon onclick function
当用户单击链接时,我试图将.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');
});
});
单击跨度(包括glyphicon)将使您可以使用“ this”来指代跨度-然后将切换类包含在一个命令中:
$(document).ready(function(){
$('.panelarrow').click(function(){
$(this).toggleClass('glyphicon-menu-down glyphicon-menu-up');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.