django-html5accordion 0.1.8

依赖项

• jQuery库

安装

在您的Django项目设置中，将“html5accordion”添加到您的INSTALLED_APPS。

用法

链接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。