一个页面中有多个展开收起,a标签点击,用jq怎么实现
时间: 2024-03-17 14:43:25 浏览: 106
可以通过以下的 jQuery 代码实现:
``` javascript
$(document).ready(function(){
// 给所有的 a 标签绑定点击事件
$("a").click(function(){
// 判断当前 a 标签的父元素是否有 class 为 collapse 的元素
if($(this).parent().hasClass("collapse")){
// 如果有则移除 class,显示内容
$(this).parent().removeClass("collapse");
$(this).text("收起");
}else{
// 如果没有则添加 class,隐藏内容
$(this).parent().addClass("collapse");
$(this).text("展开");
}
});
});
```
在 HTML 中,需要使用 class 为 `collapse` 的元素来表示需要进行展开收起的内容,例如:
``` html
<div>
<a href="#">展开</a>
<div class="collapse">
<p>这是需要展开收起的内容。</p>
</div>
</div>
```
当用户点击 `a` 标签时,会根据当前 `a` 标签的父元素是否有 `collapse` 类来决定是展开还是收起,同时修改 `a` 标签的文本内容。
阅读全文