1

基本的に、クラスを持つリンクをクリックすると、次のスパンの高さをアニメーション化するための More... リンクを取得できません"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-spaceこれを行うCSSの方法はありますか？またはおそらくdisplay: inline??

4

2 に答える 2

2

その時思いつくのはこれしかない。各文字を一度に 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/

于 2013-07-31T18:31:59.323 に答える