当前位置:主页 > JavsScript库 > 菜单 / 导航 >

可访问的手风琴/折叠器组件 - collapse.js
栏目分类:菜单 / 导航   发布日期:2021-09-11   浏览次数:

一个 Vanilla JavaScript 库,可帮助创建高度可定制且完全可访问的手风琴和可折叠/可扩展元素。

使用:

1. 在页面中添加样式表 collapse.css 和 JavaScript collapse.js。

<link href="collapse.css" rel="stylesheet" />
<script src="collapse.js"></script>

2. 手风琴/折叠器的 HTML 结构。

<div class="collapse" id="collapse-demo">
  <h2 class="collapse__heading">
    <button class="collapse__button" id="section1a" disabled>
      <span class="collapse__label">
        Section #1
      </span>
      <span class="collapse__icon">
        <svg class="icon icon-plus" focusable="false"><use xlink:href="#icon-plus"></use></svg>
      </span>
    </button>
  </h2>  
  <div class="collapse__panel">
     <p>Section 1 Content</p>
  </div>
  <h2 class="collapse__heading">
    <button class="collapse__button" id="section2a" disabled>
      <span class="collapse__label">
        Section #2
      </span>
      <span class="collapse__icon">
        <svg class="icon icon-plus" focusable="false"><use xlink:href="#icon-plus"></use></svg>
      </span>
    </button>
  </h2>  
  <div class="collapse__panel">
     <p>Section 2 Content</p>
  </div>
  <h2 class="collapse__heading">
    <button class="collapse__button" id="section3a" disabled>
      <span class="collapse__label">
        Section #3
      </span>
      <span class="collapse__icon">
        <svg class="icon icon-plus" focusable="false"><use xlink:href="#icon-plus"></use></svg>
      </span>
    </button>
  </h2>  
  <div class="collapse__panel">
     <p>Section 3 Content</p>
  </div>
</div>
<!-- SVG Icon -->
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="icon-plus" viewBox="0 0 30 32">
    <path d="M30.476 14.629h-13.714v-13.105h-3.048v13.105h-13.714v3.048h13.714v12.8h3.048v-12.8h13.714z"></path>
  </symbol>
</svg>

3. 此外,您可以创建额外的控件,使您能够展开/折叠所有面板。

<ul class="collapse__controls" aria-label="Collapse Controls">
  <li><button class="collapse__all-open">全部打开</button></li>
  <li><button class="collapse__all-close">全部关闭</button></li>
</ul>

4. 启用折叠组件。

window.addEventListener('load', (event) => {
  document.querySelectorAll('.collapse').forEach( function( element ) {
    element.collapse = Object.assign(new Collapse(element));
  });
});


官方网站:https://github.com/mrdestructicity/collapse

相关热词: collapse.js手风琴

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库