VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation 折叠列表

在你想隐藏部分内容的显示时，可以使用折叠列表。

实例



    

  1. 
<ul class="accordion" data-accordion>
    2. 

  2. 
  <li class="accordion-navigation">
    3. 

  3. 
    <a href="#demo">Simple Collapsible</a>
    4. 

  4. 
    <div id="demo" class="content">
    5. 

  5. 
      手册网教程 -- 学的不仅是技术，更是梦想！！！
    6. 

  6. 
    </div>
    7. 

  7. 
  </li>
    8. 

  8. 
</ul>
    9. 

  9. 
 
    10. 

  10. 
<!-- 初始化 Foundation JS -->
    11. 

  11. 
<script>
    12. 

  12. 
$(document).ready(function() {
    13. 

  13. 
    $(document).foundation();
    14. 

  14. 
})
    15. 

  15. 
</script>
    16. 




复制

实例预览 »



实例解析



.accordion 类和 data-accordion 属性用于创建一个可折叠的元素。 .accordion-navigation 类用于渲染可折叠元素。实际的内容在.content 类 (<div class="content") 中，点击按钮既可以显示。



我们在列表项中添加 <a> 元素来控制（显示/隐藏）可折叠的内容。然后锚链接使用与可折叠内容内容相同的id (<a href=#demo" 与 <div id="demo"> 相关联)。



注意： 可折叠的效果需要初始化 Foundation JS。



默认情况下，可折叠内容是隐藏的。我们可以通过在 <div> 上添加 .active 类让其默认是显示的：





实例




    

  1. 
<div id="demo" class="content active">
    2. 




复制

实例预览 »



手风琴效果



手风琴效果用于延展与设置可折叠内容。



手风琴效果通过使用多个不同的锚链接与id来创建：





实例




    

  1. 
<ul class="accordion" data-accordion>
    2. 

  2. 
  <li class="accordion-navigation">
    3. 

  3. 
    <a href="#demo">手风琴实例 1</a>
    4. 

  4. 
    <div id="demo" class="content active">
    5. 

  5. 
      Demo 1 - 手册网教程 -- 学的不仅是技术，更是梦想！！！
    6. 

  6. 
    </div>
    7. 

  7. 
  </li>
    8. 

  8. 
  <li class="accordion-navigation">
    9. 

  9. 
    <a href="#demo2">手风琴实例 2</a>
    10. 

  10. 
    <div id="demo2" class="content">
    11. 

  11. 
      Demo 2 - Lorem ipsum dolor sit amet....
    12. 

  12. 
    </div>
    13. 

  13. 
  </li>
    14. 

  14. 
  <li class="accordion-navigation">
    15. 

  15. 
    <a href="#demo3">手风琴实例 3</a>
    16. 

  16. 
    <div id="demo3" class="content">
    17. 

  17. 
      Demo 3 - 手册网教程 -- 学的不仅是技术，更是梦想！！！
    18. 

  18. 
    </div>
    19. 

  19. 
  </li>
    20. 

  20. 
</ul>
    21. 




复制

实例预览 »



默认情况下，手风琴列表项有一个是打开的。如果你想关闭所有可以使用 data-options="multi_expand:true;" 属性:





实例




    

  1. 
<ul class="accordion" data-accordion data-options="multi_expand:true;">
    2. 

  2. 
  ..
    3. 

  3. 
</ul>
    4. 




复制

实例预览 »



 






    













相关教程