DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。DevExpress新旧版本帮助文档下载可进QQ qun获取169725316请注意在开始本教程之前请确保DevExtreme已安装在Angular、Vue、React或jQuery应用程序中。本教程展示如何将Accordion折叠添加到页面并配置组件的核心设置因此开发者将创建以下UI组件本教程中的每一节都描述了单个配置步骤开发者也可以在以下GitHub存储库中找到完整的源代码getting-started-with-accordion。在上文中我们为大家演示了如何创建一个折叠、以及如何将数据绑定到折叠中本文将继续讲解如何创建更好的折叠功能。控制Accordion折叠操作如果不指定其他属性一次只能展开一个面板。若要更改此操作请将 collapsible 和 multiple 属性设置为true也可以使用animationDuration属性来改变面板展开和折叠动画的持续时间。jQueryindex.js$(function() { $(#accordion).dxAccordion({ // ... collapsible: true, multiple: true, animationDuration: 450 }); });Angularapp.component.htmldx-accordion ... [collapsible]true [multiple]true [animationDuration]450 /dx-accordionVueApp.vuetemplate DxAccordion ... :collapsibletrue :multipletrue :animation-duration450 / /template script // ... /scriptReactApp.js// ... function App() { return ( Accordion ... collapsible{true} multiple{true} animationDuration450 / ); } export default App;自定义项目外观要自定义面板外观请使用itemTemplate作为面板内容使用itemTitleTemplate作为面板标题。jQueryindex.js$(function() { $(#accordion).dxAccordion({ // ... itemTitleTemplate: function (data) { return data.FirstName data.LastName; }, itemTemplate: function (data) { return data.Position from data.State; } }); });Angularapp.component.htmldx-accordion ... itemTemplateitem itemTitleTemplatetitle div *dxTemplatelet data of title {{ data.FirstName data.LastName }} /div div *dxTemplatelet data of item {{ data.Position from data.State }} /div /dx-accordionVueApp.vuetemplate DxAccordion ... item-templateitem item-title-templatetitle template #title{ data } {{ data.FirstName data.LastName }} /template template #item{ data } {{ data.Position from data.State }} /template /DxAccordion /template script // ... /scriptReactApp.js// ... const customTitle (data) { return data.FirstName data.LastName; } const customItem (data) { return data.Position from data.State; } function App() { return ( Accordion ... itemTitleRender{customTitle} itemRender{customItem} / ); } export default App;