javascript - Accordion 故障排除

Question

我知道我一直在解决这些问题，但我认真地研究了 api 文档并在 Stackoverflow 上寻找其他答案，但没有任何结果。我有一个采用正确 css 的 Accordion div，但不能用作 Accordion 。这是 html 代码:

<div id="accordion" class="ui-accordion">
<ul>
        <h3 class="ui-accordion-header">Page One</h3>

    <div>
        <li class="ui-accordion-content"><a href="#1a">Subpage 1A</a>

        </li>
        <li class="ui-accordion-content"><a href="#1b">Subpage 1B</a>

        </li>
        <li class="ui-accordion-content"><a href="#1c">Subpage 1C</a>

        </li>
    </div>
        <h3 class="ui-accordion-header">Page Two</h3>

    <div>
        <li class="ui-accordion-content"><a href="#2a">Subpage 2A</a>

        </li>
        <li class="ui-accordion-content"><a href="#2b">Subpage 2B</a>

        </li>
        <li class="ui-accordion-content"><a href="#2c">Subpage 2C</a>

        </li>
    </div>
        <h3 class="ui-accordion-header">Page Three</h3>

    <div>
        <li class="ui-accordion-content"><a href="#3a">Subpage 3A</a>

        </li>
        <li class="ui-accordion-content"><a href="#3b">Subpage 3B</a>

        </li>
        <li class="ui-accordion-content"><a href="#3c">Subpage 3C</a>

        </li>
    </div>
</ul>
</div>

还有我的javascript代码

$(document).ready(function () {
$('#accordion').accordion();
});

最后这是我显示的元素的 CSS:

.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin-top: 2px;
padding: .5em .5em .5em .7em;
min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-noicons {
padding-left: .7em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}

这是 jsFiddle示例:

请查看并帮助我了解如何折叠和展开。

Answer 1

您的 html 标记有误，请查看 http://jqueryui.com/accordion/ (查看源代码)

<div id="accordion">
    <h3>Section 1</h3>
    <div>Section 1 body</div>
    <h3>Section 2</h3>
    <div>Section 2 body</div>
</div>

主容器内有一个额外的 ul 标签

更新了您的 fiddle