无法在 Foundation 5 中使用手风琴
unable to use accordion in foundation 5
我正在尝试在基础 5 中使用手风琴,但仍然无法正常工作。谁能指导我哪里做错了
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/vendor/jquery.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.accordion.js">
</script>
<script>
$(document).foundation({
accordion: {
callback : function (accordion) {
console.log(accordion);
}
}
});
</script>
</head>
<body>
<ul class="small-block-grid-1 medium-block-grid-3">
<li>
<ul class="accordion" data-accordion="myAccordionGroup">
<li class="accordion-navigation">
<a href="#panel1c">Accordion 1</a>
<div id="panel1c" class="content">
Panel 1. Lorem ipsum dolor
</div>
</li>
<li class="accordion-navigation">
<a href="#panel2c">Accordion 2</a>
<div id="panel2c" class="content">
Panel 2. Lorem ipsum dolor
</div>
</li>
<li class="accordion-navigation">
<a href="#panel3c">Accordion 3</a>
<div id="panel3c" class="content">
Panel 3. Lorem ipsum dolor
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>
版本
Foundation.js - 5.4.7
Foundation.css - 5.4.7
foundation.accordion.js - 5.4.7
jquery - 2.1.1
我发现基础 5.4.7 的解决方案不支持带有 ul 和 li 标签的手风琴。它提供对 5.5 及更高版本的支持
https://foundation.zurb.com/sites/docs/v/5.5.3/components/accordion.html
为了使用手风琴,我需要使用 dl 和 dd 标签
我正在尝试在基础 5 中使用手风琴,但仍然无法正常工作。谁能指导我哪里做错了
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/vendor/jquery.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.accordion.js">
</script>
<script>
$(document).foundation({
accordion: {
callback : function (accordion) {
console.log(accordion);
}
}
});
</script>
</head>
<body>
<ul class="small-block-grid-1 medium-block-grid-3">
<li>
<ul class="accordion" data-accordion="myAccordionGroup">
<li class="accordion-navigation">
<a href="#panel1c">Accordion 1</a>
<div id="panel1c" class="content">
Panel 1. Lorem ipsum dolor
</div>
</li>
<li class="accordion-navigation">
<a href="#panel2c">Accordion 2</a>
<div id="panel2c" class="content">
Panel 2. Lorem ipsum dolor
</div>
</li>
<li class="accordion-navigation">
<a href="#panel3c">Accordion 3</a>
<div id="panel3c" class="content">
Panel 3. Lorem ipsum dolor
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>
版本
Foundation.js - 5.4.7
Foundation.css - 5.4.7
foundation.accordion.js - 5.4.7
jquery - 2.1.1
我发现基础 5.4.7 的解决方案不支持带有 ul 和 li 标签的手风琴。它提供对 5.5 及更高版本的支持
https://foundation.zurb.com/sites/docs/v/5.5.3/components/accordion.html
为了使用手风琴,我需要使用 dl 和 dd 标签