jQuery-UI 是一个基于 jQuery 的用户界面框架，它提供了丰富的组件和交互效果。jquery-ui.accordion 是其中一个可折叠（accordion）菜单的组件，它可以让用户折叠和展开多个菜单项。但是如果需要同时展示多个菜单项，jquery-ui.accordion 就无法满足需求了。这时，我们可以使用一个 npm 包 jquery-ui.accordion.multiple 来扩展 jquery-ui.accordion。
安装
可以使用 npm 或 yarn 进行安装：
npm install jquery-ui jquery-ui.accordion.multiple # 或 yarn add jquery-ui jquery-ui.accordion.multiple
引入
如果使用 js 模块化（比如使用 webpack），可以直接在模块中引入：
import 'jquery-ui/ui/widgets/accordion' // 引入 jquery-ui.accordion import 'jquery-ui.accordion.multiple' // 引入 jquery-ui.accordion.multiple
如果不使用模块化，则需要在 HTML 文件中添加以下代码：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="path/to/jquery-ui.accordion.multiple.js"></script>
使用
使用 jquery-ui.accordion.multiple 和 jquery-ui.accordion 的方式基本一致，只需要在初始化时传入一个多选（multiple）选项即可：
$('#accordion').accordion({
multiple: true, // 多选
collapsible: true,
active: false
})具体选项的意义可以参考 jquery-ui.accordion 的文档。
示例
下面是一个简单的示例，用 jquery-ui.accordion.multiple 实现了同时展示多个菜单项的效果：
-- -------------------- ---- -------
---- ---------------
----------- ------
-----
------- ------- ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ ------------
------
----------- ------
-----
------- --------- -------- ------ ----- -------- --------- ----- ----- --- ---- ----- ----- ----- ----- --- ----- ------------ ---------- ----- ------ --------- ------ ------ --- ------- ------- ---- -- ------ ------ ------- ----- --------- ---- ------ --------- ---------
------
----------- ------
-----
-------- ----- ----- --- ----- ------------ ---------- ----- ------ ------ --------- ------ --- ------ ---- -- ------ ------- ----- ---- --- ----- ------ -----------
------
------import 'jquery-ui/ui/widgets/accordion'
import 'jquery-ui.accordion.multiple'
$('#accordion').accordion({
multiple: true, // 多选
collapsible: true,
active: false
})总结
使用 jquery-ui.accordion.multiple 可以很容易地实现同时展示多个菜单项的效果，大大增强了用户的交互体验。同时，也可以引申出更多定制化的需求。如果你想了解更多 jquery-ui 组件的使用和扩展方法，可以查看官方文档或相关的中文教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553c481e8991b448d1073