Jquery Accordion - 在title元素中隐藏和显示文本

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/