jquery - 如何让段落的其余部分在“更多...”链接上设置动画？

Question

基本上，当单击具有类 "dropdown" 的链接时，我无法获取“更多...”链接来对下一个跨度的高度进行动画处理。它根本就没有动画。仅当更改为 Less... 链接并且单击 Less... 链接以折叠段落中的额外内容时，它才会产生动画。当内容显示时，如何让 更多... 链接以动画形式显示？我目前正在切换高度，我应该做其他事情吗？

在 $(document).ready(function() { }); 中使用以下 jQuery 代码

$(".listitem").on("click", ".dropdown", function(event) {
    event.preventDefault();
    var $this = $(this);
    var type = $this.next("span").length > 0 && !$this.next("span").is(":visible") ? 'expand' : 'collapse';
    var theSpan = type == 'expand' ? $this.next("span") : $this.prev("span");
    if (type == 'expand') {
        $this.insertAfter(theSpan);
    }
    else
        $this.insertBefore(theSpan);

    theSpan.animate({height: 'toggle'}, 250, function(){
        $this.text(type == 'expand' ? ' [ Less... ]' : '[ More... ]');
    });
});

我在 ul 标记内有以下结构化 HTML(所有 li 标记的结构相同):

<li>
   <div class="listitem">
      <span style="font-weight: bold;">Headline</span> Here is some body copy for the headline that should expand with an animation when clicking on the More... link right here. <a href="#" class="dropdown red">[ More... ]</a><span class="hidden">Here is more text to be shown and it should animate when the More... link is clicked, but it currently does not!</span>
   </div>
</li>

CSS:

ul
{
    list-style: none outside none;
    list-style-type: none;
}
ul li
{
    padding: .4em;
    margin-left: -20px;
}
.listitem
{
    display: table;
}
.hidden
{
    display: none;
}

编辑

您可以在此处查看问题:http://opportunityfinance.net/Test/conference-2013/highlights.html

我需要文本在展开时保持在同一行，而不应该被推到下一行。是否有某种 white-space css 方法可以做到这一点？或者display: inline??

Answer 1

这是我当时唯一能想到的。只是一次显示/隐藏每个字母。

只有在文本完全加载后才会变成 html。

$(".expander").each(function(e) {
    var expanded = false, 
        isExpanding = false, 
        $this = $(this).text("[More...]");
    $this.click(function() {
        if(!isExpanding) {            
            isExpanding = true;
            if(!expanded) {
                var i = 0, 
                    interval = setInterval(function() {
                    if(i < $this.prev().text().length) {
                        $this.prev().prev().text($this.prev().text().substring(0, i));
                        i++;
                    } else {
                        $this.prev().prev().html($this.prev().html());
                        clearInterval(interval);
                        isExpanding = false;
                    }
               }, 1000 / 60);                
            } else {
                var i = $this.prev().text().length - 1, 
                    interval = setInterval(function() {
                    if(i >= 0) {
                        $this.prev().prev().text($this.prev().text().substring(0, i));
                        i--;
                    } else {
                        clearInterval(interval);
                        isExpanding = false;
                    }
                }, 1000 / 60);

            }
            expanded = !expanded;
        }
    });
}).prev().before("<span></span>").hide();

演示

http://jsfiddle.net/CxX8n/9/