Home > Article > Web Front-end > jquery click to expand collapse text replacement
jQuery Click to expand/collapse text replacement
In web design, we often need to use the expand/collapse function, such as list expansion, drop-down box options, article details, etc. It is relatively simple to implement this function by using jQuery. Let's take a look at the specific implementation method.
Let’s build the HTML structure first. Here we take a list expansion as an example. The HTML structure is like this:
<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>
where , each list item includes a title and content. By default, we only display the title, and the content part needs to be clicked to expand.
Next, we set the CSS style of the title and content so that they can be displayed normally and distinguished:
.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; }
Here we need to set the style of the title to hand shape to indicate that it can be clicked to expand. The content part is hidden by default, so the display attribute needs to be set to none.
The next step is the key part, we need to use jQuery to realize the function of clicking the title to expand/collapse. The specific implementation method can be divided into the following steps:
$('.list li h3').click(function() { // to do });
$('.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('展开', '收起')); } });
At this point, we have completed a simple jQuery click expand/collapse function. For the complete code, please refer to the following example:
<!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>
The above is the implementation method of using jQuery to implement the click expand/collapse function and modify the title text at the same time. Through this simple example, we can find that using jQuery can help us complete some common page interaction effects more quickly, while also improving the user experience.
The above is the detailed content of jquery click to expand collapse text replacement. For more information, please follow other related articles on the PHP Chinese website!