三种不同样式的打开折叠内容,包括同时折叠多个

最新推荐文章于 2022-03-05 10:43:56 发布

原创最新推荐文章于 2022-03-05 10:43:56 发布 · 6.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文介绍了三种不同的折叠内容展示方式，包括默认设置下必须展开一个项目、允许同时展开多个项目及仅能一次展开一个但可全部关闭的效果实现。

三种不同样式的打开折叠内容,包括同时折叠多个

演示

  XML/HTML Code
 
  <div id="wrapper">  
  
        <main class="main-wrapper">  
  
            <h2>1.默认设置必须展开一个项目</h2>  
            <div id="first">  
                <h3>Accordion One</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Two</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Three</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Four</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Five</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
            </div><!-- end of first -->  
  
            <h2>2.同时展开多个项目</h2>  
  
            <div id="second">  
  
                <h3>Accordion One</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Two</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Three</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Four</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Five</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
            </div><!-- end of second -->  
  
            <h2>3.同时展开一个，但是可以全部关闭</h2>  
  
            <div id="thirth">  
                <h3>Accordion One</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Two</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Three</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Four</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
                <h3>Accordion Five</h3>  
                <div>  
  
                    <p>test3</p>  
  
                    <p>test4</p>  
  
                    <p>test5</p>  
                </div>  
  
            </div><!-- end of thirth -->  
  
        </main><!-- end of main-wrapper -->  
  
    </div><!-- end of wrapper -->