当前位置: 首页 > 阅读正文

jquery.toggleClass方法

2021年9月13日   21 次   532字数

toggle表示切换,Class表示class属性,则toggleClass表示切换class

语法

jquery选择器.toggleClass('class名称');

如果该元素没有对应的class属性,则增加该class属性,如果已经存在该class属性,则删除该class属性。

实例

通常使用它制作导航菜单的显示或隐藏,或者文章目录显隐等

以下代码,实现了对文章目录的点击显示,与隐藏。

<!doctype html>

<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<div>
<h2><button id="title-btn" onclick="sctitle()">-</button>文章目录</h2>
<ul id="title-show">
<li>标题1</li>
<li>标题2</li>
</ul>
文章内容
</div>

<style>
.show{
	display:none;
}
</style>
<script>
	function sctitle(){
		$('#title-show').toggleClass('show');
	}
	
</script>
</body>

本篇完,还有疑问?留下评论吧

发表评论