如何在Bootstrap手风琴中使用按钮更改(-，+)符号？

在Bootstrap 4中，没有使用按钮手风琴更改(-，+)符号的默认选项。因此，可以通过使用jQuery完成。以下方法将清楚地说明。

方法：

• 令人敬畏的字体或任何图标实用程序，用于显示(-，+)符号：

• 将class =“ card-header”的div标签转换为按钮，如下所示：您可以在任何按钮上使用data-target和data-toggle属性来制作按钮手风琴。最后，使用jQuery toggleClass()方法通过按钮Bootstrap Accordion更改(-，+)符号。在字体方面，加号符号为class =“ fas fa-plus”，加号符号为class =“ fas fa-minus”。

  
      
      Collapsible Header title
      
  
    
  
    
   
      
      
      Collapsible Header title
      
      
  
  

句法：

$(selector).toggleClass('fas fa-plus fas fa-minus');

示例1：下面的示例说明如何使用jQuery更改按钮手风琴上的符号。

  

    
    
  
    
  
    
  
    
    
  
    
    
  
    
    
  
    
        button:focus {
            outline-color: black;
        }
    

  

    
        
            
                GeeksforGeeeks
            
            
              
            
                
                    
  
                        
                            Accordian Menu Item #1
                        
                        
                    
                      
                    
                        
                            GeeksforGeeks is a Computer Science portal
                            for geeks. It contains well written, well
                            thought and well explained computer science
                            and programming articles, quizzes etc.
                        
                    
                
                
                    
  
                        
                            Accordian Menu Item #2
                        
                    
                      
                    
                        
                            GeeksforGeeks is a Computer Science portal
                            for geeks. It contains well written, well
                            thought and well explained computer science
                            and programming articles, quizzes etc.
                        
                    
                
                  
                
                    
  
                        
                            Accordian Menu Item #3
                        
                        
  
                    
                    
                        
                            GeeksforGeeks is a Computer Science portal
                            for geeks. It contains well written, well
                            thought and well explained computer science
                            and programming articles, quizzes etc.
                        
                    
                
            
        
    
      
    
        $('.card-header').click(function() {
            $(this).find('i').toggleClass('fas fa-plus fas fa-minus');
        });
    
  

  

输出：

示例2：下面的示例说明如何使用jQuery更改可折叠按钮上的符号。

   

    
    
  
    
  
    
  
    
    
  
    
    
  
    
    

   

    
        
            
                GeeksforGeeeks
            
            
              
            
                
   
                    
                        Menu#1    
                    
                
   
                
   
                    
                        Menu#2    
                    
                
                   
                
   
                    
                        Menu#3    
                    
                
   
                
                    
                        Menu#1
                        
                         
                            GeeksforGeeks is a Computer Science portal
                            for geeks. It contains well written, well
                            thought and well explained computer science
                            and programming articles, quizzes etc.
                        
                    
                
   
                
                    
                        Menu#2
                        
                         
                            GeeksforGeeks is a Computer Science portal
                            for geeks. It contains well written, well
                            thought and well explained computer science
                            and programming articles, quizzes etc.
                        
                    
                
   
                
                    
                        Menu#3
                        
                         
                            GeeksforGeeks is a Computer Science portal
                            for geeks. It contains well written, well
                            thought and well explained computer science
                            and programming articles, quizzes etc.
                        
                    
                
            
       
    
    
        $('.card-btn').click(function() {
            $(this).find('i').toggleClass('fas fa-plus fas fa-minus')
        });
    

   

输出：

参考： https://api.jquery.com/toggleClass/#toggleClass-className