jquery click to expand collapse text replacement-Front-end Q&A-php.cn

jquery click to expand collapse text replacement

PHPz

Release： 2023-05-18 14:59:39

Original

605 people have browsed it

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.

HTML structure

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>

Copy after login

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.

CSS Style

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;
}

Copy after login

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.

jQuery script

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:

Add a click event listener: Add a click event listener to each title and trigger the event when the user clicks.

$('.list li h3').click(function() {
  // to do
});

Copy after login

Find the corresponding content part: Find the corresponding content part through jQuery's selector, and then display or hide it.

$('.list li h3').click(function() {
  var content = $(this).siblings('.content');

  if (content.is(':visible')) {
    content.hide();
  } else {
    content.show();
  }
});

Copy after login

Modify the title text: According to the display status of the content, modify the title text and replace "expand" with "collapse".

$('.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('展开', '收起'));
  }
});

Copy after login

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>

Copy after login

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!