jquery 点击展开/收起文字替换
在网页设计中，我们常常需要使用到展开/收起的功能，比如列表展开、下拉框选项、文章详情等。通过使用 jquery 来实现这一功能是比较简单的，下面我们一起来看一下具体的实现方法。
html 结构我们先来构建 html 结构，这里我们以一个列表展开为例，html 结构是这样的：
<ul class="list"> <li> <h3>标题1</h3> <div class="content">内容1</div> </li> <li> <h3>标题2</h3> <div class="content">内容2</div> </li> <li> <h3>标题3</h3> <div class="content">内容3</div> </li></ul>
其中，每个列表项包括一个标题和内容，我们默认情况下只显示标题，内容部分需要点击展开才能显示出来。
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 点击展开/收起的功能。完整的代码可以参考以下示例：
<!doctype html><html><head> <meta charset="utf-8"> <title>jquery 点击展开/收起文字替换</title> <style> .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; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { $('.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('展开', '收起')); } }); }); </script></head><body> <ul class="list"> <li> <h3>标题1</h3> <div class="content">内容1</div> </li> <li> <h3>标题2</h3> <div class="content">内容2</div> </li> <li> <h3>标题3</h3> <div class="content">内容3</div> </li> </ul></body></html>
以上就是使用 jquery 实现点击展开/收起的功能，同时修改标题文本的实现方法。通过这个简单的例子，我们可以发现，使用 jquery 可以帮助我们更快速地完成一些常见的页面交互效果，同时也提高了用户的体验。
以上就是jquery点击展开收起文字替换的详细内容。