使用 jQuery 实现可展开/折叠的行-html教程-PHP中文网

使用 jQuery 实现可展开/折叠的行

聖光之護

发布： 2025-09-27 13:03:11

原创

396人浏览过

使用 jquery 实现可展开/折叠的行

本文介绍了如何使用 jQuery 实现一个可展开/折叠的表格行功能。通过重新组织 HTML 结构，并使用 jQuery 的 closest() 和 find() 方法，可以轻松地控制分组行的显示和隐藏，提高用户体验。本文提供了完整的代码示例，包括 HTML、CSS 和 JavaScript，帮助你快速实现该功能。

实现可展开/折叠行的步骤

要实现可展开/折叠的行，需要对 HTML 结构进行调整，并编写相应的 jQuery 代码。以下是详细步骤：

重新组织 HTML 结构: 将表头行和内容行包裹在一个共同的父元素中，例如 div，并赋予其类名 pointer。表头行使用 header 类，内容行使用 content 类。

<div class="pointer">
  <div class="header">
    <div class="order-row">
      <div class="col start"><span class="header-text">New <span class="header-status"></span></span></div>
      <div class="col start"></div>
      <div class="col start"></div>
      <div class="col start"></div>
      <div class="col start"></div>
      <div class="col start"></div>
      <div class="col start"></div>
      <div class="col start"></div>
    </div>
  </div>
  <div class="content">
    <div class="order-row">
      <div class="col start">Mitchell Admin</div>
      <div class="col start wide">2022-05-30 10:00:00</div>
      <div class="col start wide">+1 555-555-5555</div>
      <div class="col center">1</div>
      <div class="col start wide"><span style="margin-left: 9px;"></span></div>
      <div class="col start"></div>
      <div class="col start"></div>
    </div>
  </div>
</div>

登录后复制

编写 jQuery 代码: 使用 jQuery 的 click() 事件监听器，当点击表头行时，找到对应的 content 元素，并使用 slideToggle() 方法实现展开/折叠的动画效果。
```
$(".pointer .header").click(function() {
  let parent = $(this).closest('.pointer');
  //getting the next element
  $content = parent.find('.content');
  //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
  $content.slideToggle(500, function() {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    parent.find('.header-text').toggleClass('active');
  });

});
```
登录后复制
这段代码首先使用 $(this).closest('.pointer') 找到当前点击的表头行所在的 pointer 元素。然后，使用 parent.find('.content') 找到该 pointer 元素下的所有 content 元素。最后，使用 slideToggle() 方法实现展开/折叠的动画效果。toggleClass('active') 用于切换表头文本的显示状态，可以根据需要自定义。

行者AI
行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情
添加 CSS 样式: 为了美化界面，可以添加一些 CSS 样式。
```
.header {
  background: black;
  color: white;
  font-weight: bolder;
}

.pointer {
  cursor: pointer;
}

.header-text .header-status:before {
    content: '- Collapse';
    display: inline;
}

.header-text.active .header-status:before {
    content: '+ Expand';
}
```
登录后复制
这段 CSS 代码设置了表头行的背景颜色、文字颜色和字体粗细，并将鼠标指针设置为手型。header-status:before 伪元素用于在表头文本前添加展开/折叠的指示符，active 类用于切换指示符的显示状态。

完整代码示例

以下是完整的代码示例，包括 HTML、CSS 和 JavaScript。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Expand/Collapse Row</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <style>
    .orders {
      display: flex;
      flex-flow: column nowrap;
      overflow: hidden;
      overflow-y: auto;
      margin-left: 0px;
    }

    .header-row {
      display: flex;
      flex-flow: row nowrap;
      flex: 1;
      justify-content: space-evenly;
      background: #868686;
      color: white;
    }

    .header {
      background: black;
      color: white;
      font-weight: bolder;
    }

    .pointer {
      cursor: pointer;
    }

    .orders .order-row {
      display: flex;
      flex-flow: row nowrap;
      flex: 1;
      justify-content: space-evenly;
    }

    .orders .col.start {
      justify-content: flex-start;
    }

    .orders .col {
      display: flex;
      flex: 1;
      padding: 10px;
    }

    .header-text .header-status:before {
        content: '- Collapse';
        display: inline;
    }

    .header-text.active .header-status:before {
        content: '+ Expand';
    }
  </style>
</head>
<body>
  <div class="orders">
    <div class="header-row">
      <div class="col start">Name</div>
      <div class="col center">Date/Time</div>
      <div class="col center">Phone</div>
      <div class="col center">PAX</div>
      <div class="col center">Description</div>
      <div class="col center">Table</div>
      <div class="col start"></div>
    </div>
    <div class="pointer">
      <div class="header">
        <div class="order-row">
          <div class="col start"><span class="header-text">New <span class="header-status"></span></span></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
        </div>
      </div>
      <div class="content">
        <div class="order-row">
          <div class="col start">Mitchell Admin</div>
          <div class="col start wide">2022-05-30 10:00:00</div>
          <div class="col start wide">+1 555-555-5555</div>
          <div class="col center">1</div>
          <div class="col start wide"><span style="margin-left: 9px;"></span></div>
          <div class="col start"></div>
          <div class="col start"></div>
        </div>
      </div>
    </div>

    <div class="pointer">
      <div class="header">
        <div class="order-row">
          <div class="col start"><span class="header-text">Confirm <span class="header-status"></span></span></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
          <div class="col start"></div>
        </div>
      </div>
      <div class="content">
        <div class="order-row">
          <div class="col start">Mitchell Admin</div>
          <div class="col start wide">2022-06-17 12:00:00</div>
          <div class="col start wide">+1 555-555-5555</div>
          <div class="col center">1</div>
          <div class="col start wide"><span style="margin-left: 9px;"></span></div>
          <div class="col start"></div>
          <div class="col start"></div>
        </div>
        <div class="order-row">
          <div class="col start">Mitchell Admin</div>
          <div class="col start wide">2022-05-30 10:00:00</div>
          <div class="col start wide">+1 555-555-5555</div>
          <div class="col center">1</div>
          <div class="col start wide"><span style="margin-left: 9px;"></span></div>
          <div class="col start"></div>
          <div class="col start"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(".pointer .header").click(function() {
      let parent = $(this).closest('.pointer');
      //getting the next element
      $content = parent.find('.content');
      //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
      $content.slideToggle(500, function() {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        parent.find('.header-text').toggleClass('active');
      });

    });
  </script>
</body>
</html>

登录后复制

注意事项

确保引入 jQuery 库。
根据实际情况调整 CSS 样式。
可以根据需要修改 slideToggle() 方法的动画时长。
如果需要更复杂的展开/折叠效果，可以考虑使用其他 jQuery 插件。

总结

通过本文的介绍，你应该能够使用 jQuery 实现一个简单的可展开/折叠的表格行功能。这种功能可以提高用户体验，使表格数据更易于阅读和管理。希望本文对你有所帮助！

以上就是使用 jQuery 实现可展开/折叠的行的详细内容，更多请关注php中文网其它相关文章！