本文将介绍如何使用 jQuery 实现表格行的展开和折叠功能，使数据展示更具用户友好性。通过重构 HTML 结构和调整 jQuery 代码，可以轻松地将相关内容分组，并实现点击表头展开或折叠对应内容的功能，提高用户体验。
HTML 结构重构
原始代码的问题在于 jQuery 选择器 $header.next() 仅选择紧随标题行的第一个兄弟元素。为了正确地展开/折叠所有关联的行，我们需要修改 HTML 结构，将标题行和所有内容行包裹在一个容器中。
以下是修改后的 HTML 结构示例：
NameDate/TimePhonePAXDescriptionTableNewMitchell Admin2022-05-30 10:00:00+1 555-555-55551ConfirmMitchell Admin2022-06-17 12:00:00+1 555-555-55551Mitchell Admin2022-05-30 10:00:00+1 555-555-55551
在这个结构中，.pointer 容器包含了标题行 (.header) 和所有对应的内容行 (.content)。
jQuery 代码修改
接下来，我们需要修改 jQuery 代码以适应新的 HTML 结构。
$(".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。
总结
通过重构 HTML 结构和修改 jQuery 代码，我们可以实现一个更健壮、更易于维护的展开/折叠行功能。这种方法不仅解决了原始代码的问题，还提供了一个更清晰的结构，方便后续的扩展和修改。记住，良好的 HTML 结构是实现复杂功能的基石。
以上就是使用 jQuery 实现展开/折叠行功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579268.html
微信扫一扫 
支付宝扫一扫 
