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

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

我说得对吗？因为这对我来说似乎不起作用。我的标题在单击时消失

…所以我去官方的jquery ui手风琴网页上寻找答案（），我读到这样的胡言乱语：

“头。。。 类型：选择器。。。 默认值：“>li>：第一个孩子，>：非（li）：偶数” header元素的选择器，通过主accordion元素上的.find（）应用。内容面板必须是其关联标题后的同级。”

简单地说，这是什么意思？我需要如何构造我的内容，以便jQueryUIAccordion工作

签字， 非常沮丧

另外，下面是一些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>

---

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

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

JSFiddle：

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

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>

JSFiddle：

最后一点注意：实际上，不提供标题就可以让您的工作正常，我这样做只是为了让事情更清楚。关键是你的内容没有被包装在任何东西里。您只需使用：

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

---

要获得相同的效果。

问题在于您的手风琴标记，每个部分的内容都需要与下面的内容相同，否则将无法正常工作

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>

第一节这里有一些内容

第2节还有一些内容

第3节还有更多内容

第4节内容更多

---

为什么不在JSFIDLE上复制相同的功能，这样我们就可以很容易地解释为什么它不起作用了。我不知道如何使用jfiddle。请看我上面添加的代码。我需要如何构造html代码以使其与jquery accordion ui脚本一起工作？好吧，谢谢大家的尝试。我就是不能让它工作。它在每个打开的面板底部增加了277个像素。单击标题时，标题也会消失。我认为我犯的错误是在安装（和卸载）带有扩展文本插件的EasyFAQ之后，试图使用jQueryUIAccordion。也许在我卸载它时，它留下了一些CSS或脚本，影响了jQueryUIAccordion的性能。实际上，我认为我可以让它工作。事实证明，有一个名为“heightStyle”的选项，当设置为“auto”时，它会使所有打开的面板与最高的面板具有相同的高度。如果我将其从“自动”更改为“内容”，则面板应仅与内容一样高。。。试着。。。

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

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

<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>