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

首页

web前端

前端问答

jquery点击展开收起文字替换

PHPz

May 18, 2023 pm 02:59 PM

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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

反应与前端：建立互动体验Apr 11, 2025 am 12:02 AM

React是构建交互式前端体验的首选工具。1)React通过组件化和虚拟DOM简化UI开发。2)组件分为函数组件和类组件，函数组件更简洁，类组件提供更多生命周期方法。3)React的工作原理依赖虚拟DOM和调和算法，提高性能。4)状态管理使用useState或this.state，生命周期方法如componentDidMount用于特定逻辑。5)基本用法包括创建组件和管理状态，高级用法涉及自定义钩子和性能优化。6)常见错误包括状态更新不当和性能问题，调试技巧包括使用ReactDevTools和优

React和前端堆栈：工具和技术Apr 10, 2025 am 09:34 AM

React是一个用于构建用户界面的JavaScript库，其核心是组件化和状态管理。1)通过组件化和状态管理简化UI开发。2)工作原理包括调和和渲染，优化可通过React.memo和useMemo实现。3)基本用法是创建并渲染组件，高级用法包括使用Hooks和ContextAPI。4)常见错误如状态更新不当，可使用ReactDevTools调试。5)性能优化包括使用React.memo、虚拟化列表和CodeSplitting，保持代码可读性和可维护性是最佳实践。

React在HTML中的作用：增强用户体验Apr 09, 2025 am 12:11 AM

React通过JSX与HTML结合，提升用户体验。1)JSX嵌入HTML，使开发更直观。2)虚拟DOM机制优化性能，减少DOM操作。3)组件化管理UI，提高可维护性。4)状态管理和事件处理增强交互性。

REACT组件：在HTML中创建可重复使用的元素Apr 08, 2025 pm 05:53 PM

React组件可以通过函数或类定义，封装UI逻辑并通过props接受输入数据。1)定义组件：使用函数或类，返回React元素。2)渲染组件：React调用render方法或执行函数组件。3)复用组件：通过props传递数据，构建复杂UI。组件的生命周期方法允许在不同阶段执行逻辑，提升开发效率和代码可维护性。