有人能解释一下Jquery手风琴UI是如何工作的吗？

Question

我认为，如果我用H3标题标记我的代码，并正确地应用jquery手风琴，H3标题将变得可点击，单击它们将交替隐藏或显示标题下的内容。

我说的对吗？因为它似乎不适合我。我的标题当我点击它们时会消失。

...So我访问官方的jquery手风琴网页获得答案(http://api.jqueryui.com/accordion/#option-header)，我读到这样的胡言乱语：

“头.类型:选择器.默认值："> li > :first-child，>：not(Li)：偶数"header元素的Selector，通过.find()应用于主手风琴元素。内容面板必须是与其关联的标题后面的兄弟。”

用通俗的语言来说，这是什么意思？如何构造我的内容以便jquery手风琴工作？

签了字，非常沮丧

下面是一些HTML，下面是Jquery脚本。如何构造HTML才能使它与脚本正确地工作呢？

<div id="accordion">
<h2>Section 1</h2>

Here's some content.

<h2>Section 2</h2>

Some more content.

<h2>Section 3</h2>

Yet more content.

<h2>Section 4</h2>

Even more content.
</div>

下面是剧本：

  $(function() {
$( "#accordion" ).accordion({
});
  });

Answer 1

链接到的页面有一个示例：

<div id="accordion">
    <h3>First header</h3>
    <div>First content panel</div>
    <h3>Second header</h3>
    <div>Second content panel</div>
</div>

jQuery允许您为标头元素选择自己的选择器，但它也有一个合理的默认设置。

对于上面的示例，您可以将选择器提供为"h3"：

$("#accordion").accordion({
    header: "h3"
});

JSFiddle：https://jsfiddle.net/07bske68/

要使您的内容正常工作，您需要将内容包装在一个具有某种描述的标记中，这个示例可能是一个div。

<div id="accordion">
    <h2>Section 1</h2>
    <div>Here's some content.</div>

    <h2>Section 2</h2>
    <div>Some more content.</div>

    <h2>Section 3</h2>
    <div>Yet more content.</div>

    <h2>Section 4</h2>
    <div>Even more content.</div>
</div>

然后使用"h2“作为标题的选择器：

$("#accordion").accordion({
    header: "h2"
});

JSFiddle：https://jsfiddle.net/j79d76ss/

最后注意事项：实际上可以让您的工作不需要提供标题，我只是为了让事情变得更清楚。关键是您的内容没有包装在任何东西中。你可以用：

$("#accordion").accordion();

才能达到同样的效果。

Answer 2

问题在于手风琴标记，每个部分的内容都需要像下面这样，否则就不能正常工作了

HTML代码：

<div id="accordion">
  <h2>Section 1</h2> <div><p>Here's some content.</p></div>
  <h2>Section 2</h2> <div><p>Here's some more content.</p></div>
  <h2>Section 3</h2> <div><p>Yet more content.</p></div>
  <h2>Section 4</h2> <div><p>Even more content.</p></div>
</div>

在JSFiddle上的现场演示

jQuery手风琴API