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

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

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

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

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

   
     
   
       
   
         
   New 
         
   
         
   
         
   
         
   
         
   
         
   
         
   
       
     
     
   
       
   
         
   Mitchell Admin
         
   2022-05-30 10:00:00
         
   +1 555-555-5555
         
   1
         
   
         
   
         
   
       
     
   

2. 编写 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') 用于切换表头文本的显示状态，可以根据需要自定义。

   

   睿拓智能网站系统-网上商城

   睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产

   下载

3. 添加 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。

  
  
  


  

    

      
Name
      
Date/Time
      
Phone
      
PAX
      
Description
      
Table
      

    
    

      

        

          
New 
          

          

          

          

          

          

          

        
      
      

        

          
Mitchell Admin
          
2022-05-30 10:00:00
          
+1 555-555-5555
          
1
          

          

          

        
      
    

    

      

        

          
Confirm 
          

          

          

          

          

          

          

        
      
      

        

          
Mitchell Admin
          
2022-06-17 12:00:00
          
+1 555-555-5555
          
1
          

          

          

        
        

          
Mitchell Admin
          
2022-05-30 10:00:00
          
+1 555-555-5555
          
1
          

          

          

        
      
    
  

  

注意事项

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

总结

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