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

使用 jQuery 实现展开/折叠行功能

心靈之曲

发布： 2025-09-27 11:58:43

原创

850人浏览过

使用 jquery 实现展开/折叠行功能

本文将介绍如何使用 jQuery 实现表格行的展开和折叠功能，使数据展示更具用户友好性。通过重构 HTML 结构和调整 jQuery 代码，可以轻松地将相关内容分组，并实现点击表头展开或折叠对应内容的功能，提高用户体验。

HTML 结构重构

原始代码的问题在于 jQuery 选择器 $header.next() 仅选择紧随标题行的第一个兄弟元素。为了正确地展开/折叠所有关联的行，我们需要修改 HTML 结构，将标题行和所有内容行包裹在一个容器中。

以下是修改后的 HTML 结构示例：

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

登录后复制

在这个结构中，.pointer 容器包含了标题行 (.header) 和所有对应的内容行 (.content)。

jQuery 代码修改

接下来，我们需要修改 jQuery 代码以适应新的 HTML 结构。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

$(".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');
  });

});

登录后复制

这段代码做了以下修改：

事件绑定: 将点击事件绑定到 .pointer .header，确保只有点击标题行才会触发展开/折叠。
查找父容器: 使用 $(this).closest('.pointer') 找到包含当前标题行的 .pointer 容器。
查找内容行: 使用 parent.find('.content') 在父容器中查找所有内容行。
展开/折叠内容: 使用 slideToggle() 函数实现展开和折叠的动画效果。
切换状态: 使用 toggleClass('active') 切换 .header-text 的 active 类，用于改变展开/折叠状态的显示。

CSS 样式调整

为了配合展开/折叠功能，可以添加一些 CSS 样式来改变标题行的显示状态。

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

登录后复制

这段 CSS 代码添加了展开/折叠状态的指示符，在标题行显示 + Expand 或 - Collapse。