📌  相关文章
📜  如何使用 CSS 和 JavaScript 创建可折叠部分?

📅  最后修改于: 2021-11-08 02:26:02             🧑  作者: Mango

可折叠部分是可以通过单击来缩小和扩展的内容部分。它们是一种流行的内容组织方式,用户只有在他愿意时才能看到某个部分的内容。在本文中,我们将学习如何使用 CSS 和 JavaScript 创建一个简单的可折叠部分。

它是通过使用一个按钮并将该部分的内容包含在一个 div 中来完成的。事件监听器被添加到按钮以监听鼠标点击。每次单击按钮时都会切换“Active”类。当该部分展开时,按钮的背景颜色会发生变化。此外,内容的“显示”属性在单击按钮事件时更改为“阻止”,以使其在“无”(隐藏)时可见,反之亦然,如下所示。

示例 1:




   

    

GeeksforGeeks

                
        A Computer Science portal for geeks.          It contains well written, well thought          and well explained computer science and         programming articles, quizzes and ...     
            

输出:

  • 折叠:

  • 扩展:

    示例2:折叠按钮和内容的“宽度”设置为50%,内容“居中”对齐。

    
    
      
    
    
    
      
    
        

    GeeksforGeeks

                    
            How to create a collapsible          section using CSS and JavaScript?     
                                   

    输出:

    • 折叠:
    • 扩展: