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. 
	

	

		复制

	实例预览 »



	 


      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程