Jquery解决collapsed收缩问题

本文介绍了一个使用jQuery实现的课程按钮交互功能,当点击按钮时,会改变按钮的aria-expanded属性,并根据其状态切换按钮旁边的图标,从加号变为减号,反之亦然。此功能增强了用户界面的可访问性和用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script>
	$(document).ready(function(){
		$('course-button').on('click',funtion(){
		var oldae = $(this).attr('aria-expended') === 'true';// 设置或返回被选元素的值
		$('.course-button').attr('aria-expanded','false'');
		$('.panel-group').find('.course-button').each(function(){ // each() 规定为每个匹配元素运行的函数
	var _span = $(this).find('.glyphicon'); // find() 通过选择器、jQuery 对象或元素来筛选获得当前元素集合中每个元素的后代
	if  ($(this).attr('aria-expandaed') ==='true'){
_span.removeClass('glyphicon-plus');
					_span.addClass('glyphicon-minus');
				}else{
					_span.removeClass('glyphicon-minus');
					_span.addClass('glyphicon-plus');
				}
			});
			$(this).attr('aria-expanded',!oldae);
			
			var glyphicon = $(this).find('.glyphicon');
			if($(this).attr('aria-expanded') === 'true'){
				glyphicon.removeClass('glyphicon-plus');
				glyphicon.addClass('glyphicon-minus');
			}else{
				glyphicon.removeClass('glyphicon-minus');
				glyphicon.addClass('glyphicon-plus');
			}
			
		}
	});
});


});
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值