1

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

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

$(".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... ]');
    });
});

我在标签中有以下结构化 HTML ul（所有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-spaceCSS方式来做到这一点？或者也许display: inline？

4

2 回答 2

2

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

一旦文本完全加载，它只会变成 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/

于 2013-07-31T18:31:59.323 回答
1

<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

于 2013-07-31T18:26:06.360 回答