折叠菜单

JavaScript

使用折叠菜单插件将基本的垂直菜单更改为可扩展的折叠菜单。

基础

折叠菜单遵循 <ul>、<li> 和 <a> 的基本菜单语法。要将基本菜单转换为折叠菜单，请添加属性 data-accordion-menu。您可能还希望它是垂直的，因此也要添加类 .vertical。

任何 <a> 的行为都像标准链接。但是，任何与嵌套 <ul> 菜单配对的 <a> 在单击时都会上下滑动该子菜单。

在视频中观看此部分

您可以使用内置的 .nested 类向嵌套菜单添加缩进。

要在页面加载时打开子菜单，请将 .is-active 类添加到该子菜单。

<ul class="vertical menu accordion-menu" data-accordion-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
</ul>

子菜单切换

折叠菜单可以有一个单独的子菜单切换。这允许父项目拥有自己的链接，但仍然允许打开/关闭子菜单。您需要添加类 accordion-menu 以及数据属性 data-submenu-toggle="true" 才能使其正常工作。

<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
  <li>
    <a href="https://foundation.npmjs.net.cn/" target="_blank">Link here, dropdown there →</a>
    <ul class="menu vertical nested">
      <li>
        <a href="#">Item 1A</a>
        <ul class="menu vertical nested">
          <li><a href="#">Item 1Ai</a></li>
          <li><a href="#">Item 1Aii</a></li>
          <li><a href="#">Item 1Aiii</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
      <li><a href="#">Item 1C</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。

名称	类型	默认值	描述
`$accordionmenu-padding`	数字	`$global-menu-padding`	设置折叠菜单填充。
`$accordionmenu-nested-margin`	数字	`$global-menu-nested-margin`	设置折叠菜单嵌套边距
`$accordionmenu-submenu-padding`	数字	`$accordionmenu-padding`	设置折叠菜单子菜单填充。
`$accordionmenu-arrows`	布尔值	`true`	设置折叠菜单是否具有默认箭头样式。
`$accordionmenu-arrow-color`	颜色	`$primary-color`	如果使用箭头，则设置折叠菜单箭头颜色。
`$accordionmenu-item-background`	颜色	`null`	设置折叠菜单项填充。
`$accordionmenu-border`	颜色	`null`	设置折叠菜单项边框。
`$accordionmenu-submenu-toggle-background`	颜色	`null`	设置折叠菜单项填充。
`$accordion-submenu-toggle-border`	列表	`$accordionmenu-border`	设置折叠菜单项填充。
`$accordionmenu-submenu-toggle-width`	数字	`40px`	设置折叠菜单子菜单切换背景宽度。
`$accordionmenu-submenu-toggle-height`	数字	`$accordionmenu-submenu-toggle-width`	设置折叠菜单子菜单切换背景高度。
`$accordionmenu-arrow-size`	长度	`6px`	如果使用箭头，则设置折叠菜单箭头大小。

JavaScript 参考

初始化

以下文件必须包含在您的 JavaScript 中才能使用此插件

foundation.core.js
foundation.accordionMenu.js
- 使用实用程序库 foundation.util.keyboard.js
- 使用实用程序库 foundation.util.nest.js

Foundation.AccordionMenu

创建一个折叠菜单的新实例。

var elem = new Foundation.AccordionMenu(element, options);

触发这些事件： AccordionMenu#event:init

名称	类型	描述
`元素`	jQuery	要转换为折叠菜单的 jQuery 对象。
`选项`	对象	覆盖默认插件设置。

插件选项

使用这些选项来自定义折叠菜单的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性，或者作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认	描述
`data-parent-link`	`布尔值`	`false`	将父链接添加到子菜单。
`data-slide-speed`	`数字`	`250`	以毫秒为单位动画打开子菜单的时间。
`data-submenu-toggle`			添加一个单独的子菜单切换按钮。这允许父项目具有链接。
`data-submenu-toggle-text`			如果启用，则用于子菜单切换的文本。这仅用于屏幕阅读器。
`data-multi-open`	`布尔值`	`true`	允许菜单有多个打开的面板。

事件

这些事件将从任何附加了折叠菜单插件的元素中触发。

名称	描述
`down.zf.accordionMenu`	菜单打开完成后触发。
`up.zf.accordionMenu`	菜单折叠完成后触发。

方法

hideAll

$('#element').foundation('hideAll');

关闭菜单的所有窗格。

showAll

$('#element').foundation('showAll');

打开菜单的所有窗格。

toggle

$('#element').foundation('toggle', $target);

切换子菜单的打开/关闭状态。

名称	类型	描述
`$target`	jQuery	要切换的子菜单

down

$('#element').foundation('down', $target);

打开由 $target 定义的子菜单。

触发这些事件： AccordionMenu#event:down

名称	类型	描述
`$target`	jQuery	要打开的子菜单。

up

$('#element').foundation('up', $target);

关闭由 $target 定义的子菜单。目标内的所有子菜单也将关闭。

触发这些事件： AccordionMenu#event:up

名称	类型	描述
`$target`	jQuery	要关闭的子菜单。

_destroy

$('#element').foundation('_destroy');

销毁折叠菜单的实例。

触发这些事件： AccordionMenu#event:destroyed