jquery 点击展开/收起文字替换
在网页设计中，我们常常需要使用到展开/收起的功能，比如列表展开、下拉框选项、文章详情等。通过使用 jQuery 来实现这一功能是比较简单的，下面我们一起来看一下具体的实现方法。
- HTML 结构
我们先来构建 HTML 结构，这里我们以一个列表展开为例，HTML 结构是这样的：
-
标题1
内容1 -
标题2
内容2 -
标题3
内容3
其中，每个列表项包括一个标题和内容，我们默认情况下只显示标题，内容部分需要点击展开才能显示出来。
- CSS 样式
接下来，我们将标题和内容的 CSS 样式进行设置，使其能够正常显示并区分开来：
.list li {
margin-bottom: 10px;
}
.list li h3 {
color: #333;
cursor: pointer;
font-size: 16px;
margin-bottom: 5px;
}
.list li .content {
display: none;
margin-left: 20px;
font-size: 14px;
line-height: 1.5;
}这里我们需要设置标题的样式为手型，以表示可以点击展开。内容部分默认是隐藏的，因此需要将 display 属性设置为 none。
- jQuery 脚本
接下来就是重点部分，我们需要使用 jQuery 来实现点击标题展开/收起的功能。具体的实现方法可以分为以下几个步骤：
- 添加点击事件监听器：在每个标题上添加点击事件监听器，当用户点击时触发事件。
$('.list li h3').click(function() {
// to do
});- 查找对应的内容部分：通过 jQuery 的选择器，找到对应的内容部分，然后进行显示或隐藏的操作。
$('.list li h3').click(function() {
var content = $(this).siblings('.content');
if (content.is(':visible')) {
content.hide();
} else {
content.show();
}
});- 修改标题文本：根据内容的显示状态，修改标题文本，将“展开”替换为“收起”。
$('.list li h3').click(function() {
var content = $(this).siblings('.content');
if (content.is(':visible')) {
content.hide();
$(this).text($(this).text().replace('收起', '展开'));
} else {
content.show();
$(this).text($(this).text().replace('展开', '收起'));
}
});至此，我们完成了一个简单的 jQuery 点击展开/收起的功能。完整的代码可以参考以下示例：
jquery 点击展开/收起文字替换
-
标题1
内容1 -
标题2
内容2 -
标题3
内容3
以上就是使用 jQuery 实现点击展开/收起的功能，同时修改标题文本的实现方法。通过这个简单的例子，我们可以发现，使用 jQuery 可以帮助我们更快速地完成一些常见的页面交互效果，同时也提高了用户的体验。
