Question

基本上，当单击具有类"dropdown"的链接时，我无法获取更多...链接以设置下一个跨度的高度动画。它根本没有动画。只有当它更改为Less...链接并且点击Less...链接以折叠段落中的额外内容时，它才会生成动画。如何在显示内容时获取动画的More...链接？我目前正在切换高度，我应该做其他事情吗？

在$(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/

Answer 2

<span>是内联元素，因此height属性不适用。但是你试图切换高度，这就是为什么animate()强制display: inline-block，以及它为什么第一次不起作用的原因。相反，请尝试切换opacity。

$(".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({opacity: 'toggle'}, 250, function(){
        $this.text(type == 'expand' ? ' [ Less... ]' : '[ More... ]');
    });
});

这是JSFiddle

如何让其他段落动画更多...链接？

2 个答案: