jquery - Jquery Accordion - 在标题元素中隐藏和显示文本

Question

我有一个 JQuery 手风琴，其中标题部分中的文本可能很长。

<div id="accordion">
    <h3><a href="#">Title 1</a></h3>
    <div>
        Content 1
    </div>
    <h3><a href="#">Title 2 is really really long. Ideally, only a part of title 2 will be displayed here and the remaining text should be displayed when the accordion is expanded</a></h3>
    <div>
        Content 2
    </div>
    <h3><a href="#">Title 3</a></h3>
    <div>
        Content 3
    </div>
    <h3><a href="#">Title 4</a></h3>
    <div>
        Content 4
    </div>
</div>​

小提琴示例：

http://jsfiddle.net/865M9/

有没有一种方法可以在手风琴关闭时仅显示标题的前 20 个字符，然后在手风琴元素处于活动状态（展开）时展开文本以显示完整的字符串？

Answer 1

您可以使用 CSS 将标题限制为一行。

例如：

.ui-accordion-header.ui-state-default a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

http://jsfiddle.net/jmKu4/