Jquery解决collapsed收缩问题

最新推荐文章于 2024-08-19 10:47:30 发布

原创最新推荐文章于 2024-08-19 10:47:30 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

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

<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>