Senarai Runtuh Yayasan
Apabila anda ingin menyembunyikan paparan sesetengah kandungan, anda boleh menggunakan senarai runtuh.
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">
<h2>可折叠实例</h2>
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#demo">简单的可折叠实例</a>
<div id="demo" class="content">
php中文网 -- php中文网！！
</div>
</li>
</ul>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Penghuraian contoh Kelas
.accordion dan atribut data-accordion digunakan untuk mencipta elemen boleh lipat. Kelas .accordion-navigation digunakan untuk memaparkan elemen boleh lipat. Kandungan sebenar berada dalam kelas .content (<div class="content"), yang boleh dipaparkan dengan mengklik butang.
Kami menambah elemen <a> pada item senarai untuk mengawal (menunjukkan/menyembunyikan) kandungan boleh lipat. Kemudian pautan sauh menggunakan id yang sama seperti kandungan kandungan boleh lipat (<a href=#demo" lwn. <div
id="demo">
Nota: Kesan boleh lipat memerlukan Foundation JS dimulakan.
Kandungan boleh lipat disembunyikan secara lalai. Kita boleh menjadikannya kelihatan secara lalai dengan menambahkan kelas <div> pada .active:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">
<h2>可折叠实例</h2>
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#demo">简单的可折叠实例</a>
<div id="demo" class="content active">
php中文网 -- php中文网！！
</div>
</li>
</ul>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Run Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Kesan Akordion
Kesan Akordion digunakan untuk melanjutkan dan menyediakan kandungan boleh lipat.
Kesan akordion dicipta dengan menggunakan berbilang pautan sauh berbeza dengan id:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">
<h2>手风琴实例</h2>
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#demo">手风琴 1</a>
<div id="demo" class="content active">
Demo 1 - php中文网 -- php中文网！！
</div>
</li>
<li class="accordion-navigation">
<a href="#demo2">手风琴 2</a>
<div id="demo2" class="content">
Demo 2 - php中文网 -- php中文网！！
</div>
</li>
<li class="accordion-navigation">
<a href="#demo3">手风琴 3</a>
<div id="demo3" class="content">
Demo 3 - php中文网 -- php中文网！！
</div>
</li>
</ul>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Running Instance»
Klik butang "Jalankan Contoh" untuk melihat tika dalam talian
Secara lalai, salah satu item senarai akordion dihidupkan. Jika anda ingin menutup semua, anda boleh menggunakan atribut data-options="multi_expand:true;":
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">
<h2>手风琴实例</h2>
<ul class="accordion" data-accordion data-options="multi_expand:true;">
<li class="accordion-navigation">
<a href="#demo">手风琴实例 1</a>
<div id="demo" class="content">
Demo 1 - php中文网 -- php中文网！！
</div>
</li>
<li class="accordion-navigation">
<a href="#demo2">手风琴实例 2</a>
<div id="demo2" class="content">
Demo 2 - php中文网 -- php中文网！！
</div>
</li>
<li class="accordion-navigation">
<a href="#demo3">手风琴实例 3</a>
<div id="demo3" class="content">
Demo 3 - php中文网 -- php中文网！！
</div>
</li>
</ul>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Run instance»
Klik butang "Jalankan" Contoh" untuk melihat contoh dalam talian
