Semantic-UI 手风琴倒转变化

Semantic UI 是一个开源框架，它提供了多种组件来让你的 UI 更有意义。其中之一是“手风琴”。

Semantic UI 有一个 Accordion 组件来显示不同的内容部分。用户还可以在深色背景上显示手风琴。让我们看看手风琴的这种变化。

Semantic UI Accordion Inverted Variation ：如果您想在黑色背景上显示手风琴，您可以使用倒置手风琴。显示相关内容的单个或一组部分可以在深色背景中显示。我们将创建一个 UI 来显示手风琴倒转变化。

Semantic-UI Accordion Inverted Variation 类：

• 倒置：这个类用于使手风琴倒置（颜色方面）。

句法：

   

      
......
      
.....
      ....
   

要切换部分的隐藏和显示，我们使用以下语法：

    $('.ui.accordion').accordion();

示例 1：这些示例通过使用倒排类演示了手风琴倒排变化。

HTML

 

    
    
    
    

 

    
    
        GeeksforGeeks
        
             
Semantic UI Accordion Inverted Variation
 
        
        
 
        
            
                 
Geeks for Geeks Self-Paced Courses
 
                
                    
                    Data Structures and Algorithms - Self Paced
                
                
                     

                        Most popular course on DSA trusted by
                        over 50,000 students! Built with years
                        of experience by industry experts and
                        gives you a complete package of video
                        lectures, practice problems, quizzes,
                        discussion forums and contests. Start
                        Today!
                    
 
                
                
                    
                    Amazon SDE Preparation Test Series
                
                
                     

                        A test series that will help you prepare
                        for coding interviews for Amazon and
                        other product-based companies.Programming
                        questions similar to those asked in
                        real-time Amazon interviews.The perfect
                        test series to practice and test your
                        skills!
                    
 
                
                
                    
                    Complete Interview Preparation - Self Paced
                
                
                     

                        An interview-centric course designed to
                        prepare you for the role of SDE for both
                        product and service based companies.
                        A placement preparation pack built with
                        years of expertise. Prepare C++, Java,
                        DSA, CS Theory concepts and much more!
                    
 
                
            
        
    
    
        $('.ui.accordion').accordion();
    

 

输出：您可以在深色背景中看到手风琴，如下图所示。由于手风琴被标记为倒置类，手风琴的所有内容都在深色背景中。

手风琴倒转变奏

示例 2：

HTML

 

    Semantic UI Accordion Menu
    
    
    
    
    

 

    
    
        GeeksforGeeks
        
 
             
Semantic UI Accordion Inverted Variation
 
 
        
        
        
            
                
                    
                        
                        Choose Your favourite coding language
                    
                    
                        
                            
                                
                                    
                                        
                                        C++
                                    
                                
                                
                                    
                                        
                                        Java
                                    
                                
                                
                                    
                                        
                                        Python
                                    
                                
                            
                        
                    
                
            
        
    
 
    
        $('.ui.accordion').accordion();
        $('.ui.radio.checkbox').checkbox();
    

 

输出：您可以在深色背景中看到手风琴，如下图所示。

倒置手风琴

参考： https://semantic-ui.com/modules/accordion.html#inverted