📜  关闭手风琴时如何自动关闭手风琴内部的所有可折叠元素?

📅  最后修改于: 2021-05-25 17:21:38             🧑  作者: Mango

Collapse插件提供了一种显示和隐藏内容的快速方法。通过几个类和Bootstrap 4 JavaScript插件,它使内容在程序上的可感知性发生了变化。

内容的翻转(切换)需要与href属性或具有data-target属性的按钮连接。在这两种情况下,都需要data-toggle =“ collapse”

句法:

href属性链接。

或者

具有data-target属性的按钮。


 

要显示卡:

  

例子:

HTML


  

    
    
    
  
    
    
  
    
    
    
      
    
      
    
      
    
        How to automatically close all
        collapsible elements inside of 
        the accordion when closing the
        accordion?
    

  

    
        

                Geeksforgeeks                      


                            

                               
            
                
                    Basic Example                 
                                      

                    Collapse plugin provides a quick                      way of revealing and hiding content.                     It toggle the visibility of content                     across your program project with a                     few classes and Bootstrap4                     JavaScript plugins.                 

               
        
    
  


HTML


  

    
    
    
  
    
    
  
    
    
    
      
    
      
    
      
    Multiple Collapse

  

    
        

                Geeksforgeeks                      


                                Flip first card                                                             
            
                
                    
                        
                            Multiple collapse                         
                        Collapse plugin provides a quick                          way of revealing and hiding content.                         It toggle the visibility of content                          across your program project with a                          few classes and Bootstrap4 JavaScript                         plugins.                     
                
            
            
                
                    
                        
                            Multiple collapse                         
                        Collapse plugin provides a quick way                          of revealing and hiding content.                         It toggle the visibility of content                          across your program project with a                          few classes and Bootstrap4 JavaScript                          plugins.                     
                
            
        
    
  


HTML


  

    
    
    
  
    
    
  
    
    
    
      
    
      
    
      
    Accordion

  

    
        

                Geeksforgeeks                      


                   
            
                
                    
                                             
                
                
                                           
                                                     Collapse plugin provides a                              quick way of revealing and                              hiding content. It toggle                              the visibility of content                              across your program project                             with a few classes and                             Bootstrap4 JavaScript plugins.                             Using the card component, you                              can extend the default collapse                             behavior to create an                             accordion.                                              
                
            
            
                
                    
                                             
                
                
                       
                                                     Collapse plugin provides a quick                              way of revealing and hiding content.                             It toggle the visibility of content                              across your program project with a                              few classes and Bootstrap4 JavaScript                             plugins. Using the card component,                              you can extend the default collapse                              behavior to create an accordion.                                              
                
            
            
                
                    
                                             
                
                
                       
                                                     Collapse plugin provides a quick                              way of revealing and hiding content.                             It toggle the visibility of content                             across your program project with a                              few classes and Bootstrap4 JavaScript                             plugins. Using the card component,                              you can extend the default collapse                              behavior to create an accordion.                                              
                
            
        
    
  


HTML


  

    
    
    
  
    
    
  
    
    
    
      
    
      
    
    Accordion

  

    
        

                Geeksforgeeks                      


                   
            
                
                    
                                             
                
                
                       
                        
                            
                                   
                                                                                                                                                     
                            
                               
                                
                                    
                                        Some Content of First One                                     
                                
                            
                               
                                
                                    
                                        Some Content of First Two                                     
                                
                            
                               
                                
                                    
                                        Some Content of First Three                                     
                                
                            
                        
                    
                
            
            
                
                    
                                             
                
                   
                       
                        Collapse plugin provides a quick                          way of revealing and hiding content.                         It toggle the visibility of content                         across your program project with a                          few classes and Bootstrap4 JavaScript                         plugins. Using the card component,                          you can extend the default collapse                         behavior to create an accordion.                     
                
            
               
                
                    
                                             
                
                
                       
                        Collapse plugin provides a quick                          way of revealing and hiding content.                         It toggle the visibility of content                         across your program project with a                          few classes and Bootstrap4 JavaScript                         plugins. Using the card component,                          you can extend the default collapse                          behavior to create an accordion.                     
                
            
        
    
  


输出:

**注意:如果您不希望将内容放在此处,请删除

标签。

多个目标:多个                                

            
                
                    
                        
                            Multiple collapse                         
                        Collapse plugin provides a quick                          way of revealing and hiding content.                         It toggle the visibility of content                          across your program project with a                          few classes and Bootstrap4 JavaScript                         plugins.                     
                
            
            
                
                    
                        
                            Multiple collapse                         
                        Collapse plugin provides a quick way                          of revealing and hiding content.                         It toggle the visibility of content                          across your program project with a                          few classes and Bootstrap4 JavaScript                          plugins.                     
                
            
        
    
  

输出:

手风琴:利用卡片组件,您可以扩展默认的折叠行为以形成手风琴。

范例

的HTML



  

    
    
    
  
    
    
  
    
    
    
      
    
      
    
      
    Accordion

  

    
        

                Geeksforgeeks                      


                   
            
                
                    
                                             
                
                
                                           
                                                     Collapse plugin provides a                              quick way of revealing and                              hiding content. It toggle                              the visibility of content                              across your program project                             with a few classes and                             Bootstrap4 JavaScript plugins.                             Using the card component, you                              can extend the default collapse                             behavior to create an                             accordion.                                              
                
            
            
                
                    
                                             
                
                
                       
                                                     Collapse plugin provides a quick                              way of revealing and hiding content.                             It toggle the visibility of content                              across your program project with a                              few classes and Bootstrap4 JavaScript                             plugins. Using the card component,                              you can extend the default collapse                              behavior to create an accordion.                                              
                
            
            
                
                    
                                             
                
                
                       
                                                     Collapse plugin provides a quick                              way of revealing and hiding content.                             It toggle the visibility of content                             across your program project with a                              few classes and Bootstrap4 JavaScript                             plugins. Using the card component,                              you can extend the default collapse                              behavior to create an accordion.                                              
                
            
        
    
  

输出:

关闭手风琴时如何自动关闭手风琴内部的所有可折叠元素?

例子:

的HTML



  

    
    
    
  
    
    
  
    
    
    
      
    
      
    
    Accordion

  

    
        

                Geeksforgeeks                      


                   
            
                
                    
                                             
                
                
                       
                        
                            
                                   
                                                                                                                                                     
                            
                               
                                
                                    
                                        Some Content of First One                                     
                                
                            
                               
                                
                                    
                                        Some Content of First Two                                     
                                
                            
                               
                                
                                    
                                        Some Content of First Three                                     
                                
                            
                        
                    
                
            
            
                
                    
                                             
                
                   
                       
                        Collapse plugin provides a quick                          way of revealing and hiding content.                         It toggle the visibility of content                         across your program project with a                          few classes and Bootstrap4 JavaScript                         plugins. Using the card component,                          you can extend the default collapse                         behavior to create an accordion.                     
                
            
               
                
                    
                                             
                
                
                       
                        Collapse plugin provides a quick                          way of revealing and hiding content.                         It toggle the visibility of content                         across your program project with a                          few classes and Bootstrap4 JavaScript                         plugins. Using the card component,                          you can extend the default collapse                          behavior to create an accordion.                     
                
            
        
    
  

输出:

为什么我们使用咏叹调扩展和咏叹调控制?

aria扩展名添加到控件组件。这种质量明确地(明确地)传递到与控件相关联的可折叠组件的当前状态,以筛选每个用户(阅读器)和可比较的辅助技术。如果可折叠组件默认情况下处于关闭状态,则控制组件上的属性应该具有(set) aria-expanded =“ false”的自尊。如果您使用show类将可折叠组件默认设置为打开,则在控件脚背上设置aria-expanded =“ true”。因此,该插件将根据是否已打开或关闭可折叠组件(通过JavaScript,或者由于客户端激活了另一个与该可折叠组件绑定的控件组件),在控件上翻转(切换)此特征。如果控制元素的HTML组件不是按钮(例如

),则应该在组件中包括属性role =“ button”。

如果您的控件组件只关注单个可折叠组件,即data-target属性指示ID选择器,则应将aria-controls属性包括在控件组件中,其中包含可折叠组件的ID 。先进的屏幕浏览器用户和比较先进的辅助技术(技术)利用此特性为客户提供了额外的替代途径,以直接探索可折叠组件本身。

我们可以通过数据属性JavaScript使用Collapse和Accordion。

通过数据属性:崩溃插件利用许多类来处理压倒性的提升:

  • .collapse掩盖了内容
  • .collapse.show出现内容
  • .collapsing在过渡开始时包括在内,并在过渡结束时退出。

向该组件添加data-toggle =“ collapse”和一个数据目标,以自然地分配对一个或多个可折叠组件的控制。 data-target属性确认CSS选择器应用折叠。毫无疑问将类崩溃包括到可折叠组件中。如果您希望它默认打开,请增加额外的班级表演。

为了将类似手风琴的集合管理包括到可折叠范围,请包含信息属性data-parent =“#selector”

通过JavaScript:

$('.collapse').collapse()

方法:

  • .collapse(options):将您的内容作为可折叠的组件显示。确认可选的替代对象。选项是父项和切换项。前任。 $(’#myCollapsible’)。collapse({toggle:false})
  • .collapse(’toggle’):翻转可折叠组件以使其出现或被遮盖。
  • .collapse(’show’):出现可折叠的组件。
  • .collapse(’hide’):掩盖可折叠的组件。
  • .collapse(’dispose’):破坏组件的折叠。