单击整个标题div时如何使Bootstrap 4手风琴折叠？

在Bootstrap 4中，单击锚点或按钮标签时手风琴会折叠，但是让我们看看如何通过以下简单方法在单击整个标题时使Bootstrap 4手风琴折叠。

首先，您必须在class =“ card-header”的div内删除锚标签和按钮标签(卡标题除外)。现在添加折叠的类，并将card-link链接到div的现有class =“ card-header”。最后，添加诸如data-toggle =“ collapse” data-target =“＃collapseOne”之类的属性。

注意：数据目标属性值必须是折叠div标签的ID。

    Collapsible  header title

  

    

      
      
      
    

示例：下面的示例说明了使用简单方法单击整个标题div时如何使Bootstrap 4手风琴折叠。

  

    
        Bootstrap 4 accordion collapse when
        clicking the whole header div
    
    
    
    
    
    
    
    
    
    

  

    
        
  
        GeeksforGeeeks
        
        
            Bootstrap 4 accordion collapse when
            clicking the whole header div
        
        
            
                
                    GeeksforGeeks
                
                
                    
                        GeeksforGeeks is a computer science portal. 
                        It is the best platform to lean programming.
                    
                
            
            
                
                    Bootstrap
                
                
                    
                        Bootstrap is free and open-source collection
                        of tools for creating websites and web applications.
                    
                
            
            
                
                    HTML
                
                
                    
                        HTML stands for HyperText Markup Language.
                        It is used to design web pages using markup language.
                    
                
            
        
     

  

输出：

参考： https://getbootstrap.com/docs/4.3/components/collapse/