js支持扩展/折叠内容,如html5细节/摘要元素
django-html5accordion的Python项目详细描述
Django-HTML5Accordion添加了JS支持来扩展/折叠任何内容,如 HTML5细节/摘要元素。它可以在任何元素上调用,并接受 选项来设置summary内容的选择器,该内容应始终 保持可见(并充当展开/折叠隐藏内容的链接)。 滑动/向下动画的速度,当 details元素已展开,^{tt1}中元素的选择器$ 这不应该触发展开/折叠和回调fns。
依赖关系
安装
在Django项目设置中,将“HTML5Accordion”添加到已安装的应用程序中。
用法
链接js:
<script src="{{ STATIC_URL }}html5accordion/jquery.html5accordion.js"></script>
HTML示例:
<article class="details"> <header class="summary"> <p>This content will always be visible</p> </header> <div> <p>This content will expand/collapse when `.summary` is clicked</p> </div> </article>
调用插件:
$('.details').html5accordion();
使用各种选项调用插件,这些选项显式配置为 默认值:
$('.details').html5accordion({ summarySelector: '.summary', // Selector for summary text slideSpeed: 200, // Slide animation speed (ms) expandedClass: 'open', // Class added when details are // expanded ignoredElements: 'button, a, input, label', // Elements within `summary` that // will not trigger expand/collapse initialSlideSpeed: null, // Slide animation speed (ms) for // already-expanded details openCallback: null, // Callback fn after open animation closeCallback: null // Callback fn after close animation });
注意:要在初始加载时展开details元素,只需添加类 open(或作为选项expandedClass传递的任何类),或添加 属性open。