我已经包含CSS和JS CDN。我也尝试使用整个扩展CDN,但仍然无法正常工作。这是codepen。
https://codepen.io/firdausai/pen/rNxBLKr?editors=1000
<head>
<!-- Load bulma CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Load bulma accordion CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-accordion.min.css">
<!-- Load fontawesome CDN -->
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<div class="card">
<header class="card-header">
<p class="card-header-title">
Card title
</p>
<a href="#collapsible-card" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div id="collapsible-card" class="is-collapsible is-active">
<div class="card-content">
<p class="title is-4">
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one
errors.”
</p>
<p class="subtitle is-5">
Jeff Atwood
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
</span>
</p>
<p class="card-footer-item">
<span>
Share on <a href="#">Facebook</a>
</span>
</p>
</footer>
</div>
</div>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bulma-accordion.min.js"></script>
</body>
任何建议?
读取the documentation,您必须添加此行:
var accordions = bulmaAccordion.attach(); // accordions now contains an array of all Accordion instances
也如文档中所述,有一个具有许多新功能here的新版本,我正在使用它,我发现它比bulma手风琴更好。