Question

我在我的项目中使用了美国网页设计标准手风琴。但是，我找不到能够让我同时扩展几个手风琴标题的功能。我是否可以在其上面编写单独的JavaScript以启用所需的功能？
演示：https://jsfiddle.net/0mrdvw3w/

<ul class="usa-accordion">
<li>
<button class="usa-accordion-button"
aria-expanded="false" aria-controls="amendment-1">
First Amendment
</button>
<div id="amendment-1" class="usa-accordion-content">
<p>
- Some text - Some text - Some text -
</p>
</div>
</li>
<li>
<button class="usa-accordion-button"
aria-controls="amendment-2">
Second Amendment
</button>
<div id="amendment-2" class="usa-accordion-content">
<p>
- Some text - Some text - Some text -
</div>
</li>
<li>

Answer 1

现在不要引用我这个，但我相信手风琴一次只能显示1个面板，所以我认为它不适用于你想做的事情。但是，如果您想要在用户单击时显示面板，则可以使用jQuery创建自己的jQuery。您可以使用jQuery的slideToggle()。

我会做这样的事情：

<ul class="usa-accordion">
    <li>
      <button class="usa-accordion-button"
        aria-expanded="false" aria-controls="amendment-1">
        First Amendment
      </button>
      <div id="amendment-1" class="content">
        <p>
        Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
        </p>
      </div>
    </li>
</ul>

然后：

$(".content").hide();

$(".usa-accordion-button").click(function() {

    $(this).next().slideToggle(function() {

        if ($(this).is(":visible")) {
            // change icon to '-'
        } else {
            // change icon to '+'
        }
    });

});

DEMO：http://jsbin.com/yibixoxoru/edit?html,js,output

如何扩展几个手风琴标题？

1 个答案: