jquery点击展开收起文字替换-前端问答-PHP中文网

jquery点击展开收起文字替换

PHPz

发布： 2023-05-18 14:59:39

原创

610 人浏览过

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点击展开收起文字替换的详细内容。更多信息请关注PHP中文网其他相关文章！