如何始终使用Bootstrap在动态折叠中显示前两行？

Bootstrap是一个开源前端CSS框架，广泛用于交互式网站的开发。带有HTML和JavaScript的Bootstrap会增加用户界面的交互性。 jQuery是一个JS库，用于处理HTML DOM，事件处理，CSS动画和Ajax。 jQuery还是一个免费的开放源代码库，超过73％的开发人员使用了jQuery。 jQuery以简化的方式完成由JavaScript执行的任务。

在本文中，我们将讨论在动态折叠中显示前两行的方法。 Bootstrap捆绑了多种功能，Bootstrap提供的功能之一是可折叠组件，用于显示和隐藏内容。按钮或锚点用作我们切换的特定元素的触发器。以下是有助于折叠以显示元素的类。

班级：

• .collapse：此类隐藏内容
• .collapsing ：在从折叠状态到可见状态的转换过程中应用该类，反之亦然
• .collapse.show ：此类显示内容。

辅助功能：手风琴可以证明我们的要求。 “ card”组件用于扩展默认的折叠行为以创建手风琴。 aria-expanded属性已添加到控件元素。此属性表示绑定到控件的可折叠元素的当前状态。

如果默认情况下可折叠元素是关闭的，则该属性设置为aria-expanded =“ false” 。如果默认使用show类显示可折叠元素，则在控件上设置aria-expanded =“ true”。这会根据可折叠元素的当前状态自动在控件上切换此属性。

如果控制元素的目标是单个可折叠元素，即data-target属性指向“ id”选择器，则我们应将aria-controls属性添加到包含可折叠元素“ id”的控制元素中。显示可折叠项目时，父项下的所有可折叠元素都将关闭。

范例1：

  

    
    
  
    
    
    
  
    
    
  
    
    

  

    
    
        
            
            
                
                    
                    
                    
                        Collapsible Item 1
                    
                
            
  
            
            
            
                
                    This is slot 1.
                
            
        
        
            
            
                
                    
                    
                    
                        Collapsible Item 2
                    
                
            
  
            
            
            
                
                    This is slot 2.
                
            
        
        
            
                
                    
                    
                    
                        Collapsible Item 3
                    
                
            
            
                
                    This is slot 3.
                
            
        
        
            
                
                    
                    
                    
                        Collapsible Item 4
                    
                
            
            
                
                    This is slot 4.
                
            
        
    

  

输出：

在下面的示例中，默认情况下，手风琴的前两行始终保持打开状态。即使单击行标题也没有切换效果。这是因为前两行没有导致切换效果的“数据切换”，“数据目标”，“ aria扩展”，“ aria控件”属性。由于前两行的data-parent属性也已删除，因此它们与显示切换功能的其余行无关。最后两行完整保留了所有必需的属性，因此它们显示了动态折叠功能。

方法：第二种方法与第一种方法非常相似，除了我们创建嵌套的手风琴并删除前两行的data-toggle属性。前两行具有data-parent属性。如果用户希望在前两行中添加折叠功能，请添加data-toggle属性。单击第一行时，标题将打开并折叠第二行，反之亦然。前两行与后两行无关，它们分别作为第一行和第二行的数据父属性值。

  

  
    
    
  
    
    
    
    
    
    
    

  

    
    
        
            
            
                
                    
                    
                        Collapsible Item 1
                    
                
            
            
            
                
                    This is slot 1.
                
            
        
        
            
            
                
                    
                    
                        Collapsible Item 2
                    
                
            
            
            
                
                    This is slot 2.
                
            
        
        
        
            
                
                
                    
                        
                            Collapsible Item 3
                        
                    
                
                
                
                    
                        This is slot 3.
                    
                
            
            
  
                
                
                    
                        
                            Collapsible Item 4
                        
                    
                
  
                
                
                    
                        This is slot 4.
                    
                
            
        
        
    

  

输出：

视频输出：