Liste d’effondrement des fondations
Lorsque vous souhaitez masquer l'affichage de certains contenus, vous pouvez utiliser la liste réduite.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Analyse d'instance La classe
.accordion et l'attribut data-accordion sont utilisés pour créer un élément pliable. La classe .accordion-navigation est utilisée pour restituer les éléments pliables. Le contenu réel se trouve dans la classe .content (<div class="content"), qui peut être affichée en cliquant sur le bouton.
Nous ajoutons l'élément <a> à l'élément de liste pour contrôler (afficher/masquer) le contenu réductible. Ensuite, le lien d'ancrage utilise le même identifiant que le contenu réductible (<a href=#demo" vs. <div
id="démo">
Remarque : Les effets pliables nécessitent que Foundation JS soit initialisé.
Le contenu pliable est masqué par défaut. Nous pouvons le rendre visible par défaut en ajoutant la classe <div> à .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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Effet Accordéon
L'effet Accordéon est utilisé pour étendre et configurer du contenu pliable.
L'effet accordéon est créé en utilisant plusieurs liens d'ancrage différents avec des identifiants :
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>Instance en cours d'exécution»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Par défaut, l'un des éléments de la liste en accordéon est activé. Si vous souhaitez tout fermer, vous pouvez utiliser l'attribut 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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter un exemple » pour afficher des exemples en ligne
