Question

我正在使用一个jquery手风琴，只有一个内容面板，如下所示：

<ul id="myaccordion">
    <li>
        <a href="#">Header Title</a>
        <div>
            Content in here.
        </div>
    </li>
</ul>

然后致电：

$('#myaccordion').accordion();

我遇到的问题是，accrodion的内容部分标识正确的宽度，但标题只是文本的宽度，显示为“标题标题”，此文本与箭头图标重叠。

任何人都可以看到为什么标题与我的内容的宽度不同？我试过设置一个特定的ul，li和a标签，但没有效果。

非常感谢提前。

Answer 1

用于样式的手风琴代码expects a header around that anchor（或者任何包装元素），因为这里的样式需要它：

.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }

只需在其中添加一个包装器，如下所示：

<ul id="myaccordion">
    <li>
        <h3><a href="#">Header Title</a></h3>
        <div>
            Content in here.
        </div>
    </li>
</ul>

Here's a demo showing both with and without the <h3>, so you can see the effect

jQuery手风琴标题的宽度不同于内容

1 个答案: