如何让 jQuery UI Accordion 默认折叠？

在本文中，我们将学习如何让 jQuery UI Accordion 默认保持折叠状态。这可以通过将 jQuery Accordion 的 'active' 属性设置为 false 来完成。

Accordion：它是一种显示可折叠内容面板的方式，用于在有限的空间中呈现信息。通过单击每个面板，我们可以看到其中的内容，并使用切换功能可以折叠内容面板。

Accordion active 选项指示在访问页面时要打开手风琴菜单的哪个索引。默认值为0，即第一个菜单面板。当 active 选项设置为 false 时，它将折叠所有面板。

请参阅jQueryUI Accordion active Option文章了解更多详细信息。

句法：

$( "Selector" ).accordion();

方法：

首先，将 jQuery 和 JQuery UI CDN 添加到脚本或将它们下载到本地计算机。

在对话框的主体中创建一个 div 并将 id 保持为demoAccordion 。

在 demoAccordion div 中，添加 3 个 div，它们将成为 Accordion 的面板。

现在，使用 jQuery Accordion() 方法，创建 Accordion 并将 collapsible 属性保持为 true。

$("#demoAccordion").accordion({ collapsible: true });

示例：此示例通过将其值指定为 true 来描述 jQuery UI Accordion 折叠。

HTML

 

    jQuery UI Accordion
    
    
    
    
    
    
    
        $(document).ready(function() {
            $("#demoAccordion").accordion({
                collapsible: true
            });
        });
    

 

    
        
            Python
        
        
            Python is a popular programming language.
            Python can be used on a server to create
            web applications.
        
        
            Java
        
        
            Java is a popular programming language.
            Java is used to develop mobile apps,
            web apps, desktop apps, games and much more.
        
        
             C language 
        
        
            C is considered as a middle-level language
            because it supports the feature of both
            low-level and high-level languages
        
    

 

输出：

现在，我们将看到如何创建默认折叠的 jQuery UI Accordion。要创建默认折叠的手风琴，我们需要将 jQuery Accordion 的 'active' 属性设置为 false。

句法：

$("#demoAccordion").accordion({ collapsible: true, active: false});

方法：

• 在正文中为对话框创建一个 div，并将 id 保持为demoAccordion 。
• 在 demoAccordion div 中，添加 3 个 div，它们将成为 Accordion 的面板。
• 现在，使用 jQuery Accordion() 方法，创建 Accordion 并将 collapsible 属性保持为 true。
• 将active 属性设置为 false以使手风琴折叠，默认情况下。

示例：此示例通过将 active 属性设置为 false 来描述 jQuery UI Accordion 折叠。

HTML

 

    jQuery UI Accordion
    
    
    
    
    
    
    
        $(document).ready(function() {
           
            // Setting jquery accordion active property to false
            $("#demoAccordion").accordion({
                collapsible: true,
                active: false
            });
        });
    

 

    
        
            Python
        
        
            Python is a popular programming language.
            Python can be used on a server to create
            web applications.
        
        
            Java
        
        
            Java is a popular programming language.
            Java is used to develop mobile apps,
            web apps, desktop apps, games and much more.
        
        
             C language 
        
        
            C is considered as a middle-level language
            because it supports the feature of both
            low-level and high-level languages
        
    

 

输出：