Question

我知道我一直在解决这些故障排除问题，但我认真研究了api文档，并在Stackoverflow上寻找其他答案，但没有任何内容出现。我有一个手风琴div，它采用正确的CSS，但不是手风琴。这是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

Answer 2

我只有一个

组合。我需要在每个内容div中添加一个组合，如下所示：

<div class="ui-accordion-content">
    <ul>
        <li><a><!--Content goes here--></a></li>
    </ul>
</div>

我已更正它，您可以看到updated fiddle here。

手风琴故障排除

2 个答案: