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>
本篇完,还有疑问?留下评论吧