jQuery:animate addClass() - コンテナを展開しますか?

次の問題:私は最初の行を表示したいだけのテキストがたくさんある単純な段落を持っています。だから、実際にはおしゃれな人です。最初の行をクリックすると、その段落はアニメーション化され、その高さ(および幅)になります。今私は、クラスcollpsedを削除することによってそうしています...


jQuery:

$('p.collapsed').click(function() { 
   $(this).removeClass('collapsed').addClass('expanded');
   $(this).append("×");
});

$('a.closer').click(function(e) {
   $(this).remove();
   $('p.expanded').removeClass('expanded').addClass('collapsed');
});

I'd also like to have a closing element appended when the paragraph is expanded so I can collapse it again. Check out my fiddle - http://jsfiddle.net/3J2g7/

いくつかの問題:

1.)今は、段落をクリックするたびに a.closer が追加される理由はわかりません。これをクリックすると、 collapsed クラスを削除するので、append()を再び起動しないようにするため、一度だけ追加する必要があります。

2.)なぜ a.closer 要素がクリックされても取り除かれないのか?

3.)全体の経験をアニメーション化するファンシーな方法がありますか?例えば。私は単にそれをクリックすると段落の残りの部分をslideDown()し、近くをクリックするとslideUp()をもう一度やりたい。

4.) The last thing I don't know is why I can't append three dots to the collapsed paragraph as a little hint so there is more text, I tried so using :after on the p, but doesn't work!

1
あなたは一度に一つの質問をするべきです。 4つではありません。私の答えの助けを願う。
追加された 著者 gdoron,

2 答え

DOMを変更しているので、 on のようなデリゲートイベントアタッチを使用する必要があります。

更新されたコード:

$(function() {
    $('body').on('click', 'p.collapsed', function() {
        $(this).removeClass('collapsed').addClass('expanded')
               .hide().slideDown('fast');
        $(this).append("×");
    });

    $('body').on('click', 'a.closer', function(e) {
        $(this).remove();
        $('p.expanded').slideUp('fast', function() {
             $(this).removeClass('expanded').addClass('collapsed').show();
        });
    });
});

body の代わりにセレクタに p.collapsed a.closer を含む最も近い要素を与えます。

3)体験全体をアニメーション化するファンシーな方法はありますか?

はい、私は hide + slideDown( 'fast') slideUp( 'fast') + show 優れたユーザーエクスペリエンス。

JSFiddle DEMO

3
追加された
パーフェクト、ありがとう。私は崩壊時にもアニメーションを作成する簡単な方法があるのだろうかと思います。私は今しようとしていますが、簡単な解決策を見つけることができません。とにかく、ありがとう、完璧!
追加された 著者 matt,
うん、私はそれがslideDownでアニメートしているのを見ましたが、もう一度閉じるとアニメートしませんか?
追加された 著者 matt,
@マット。 OK。加えて... =)デモをもう一度チェック...
追加された 著者 gdoron,
removeClass/addClass のコードは、 $(this).toggleClass( 'collapsed expanded')で短縮することもできます。
追加された 著者 Yoshi,

1)今は、段落をクリックするたびにa.closerが追加される理由はわかりません。一度だけ追加する必要があります。   それをクリックすると折りたたまれたクラスを削除してはいけません   append()をもう一度実行します。

これは、閉じるリンクをクリックするたびに{$(this).append( "x");}が実行されるためです。

あなたがdivを展開/折りたたむたびにリンクを追加したり削除したりする特別な理由はありますか? 。なぜそれを追加したり、HTMLに追加したりすることができますか?

So your code would look like http://jsfiddle.net/azy777/EqDm9/10/

2。)a.closer要素をクリックしたときにその要素が削除されない理由は何ですか?

エレメントを動的に追加するので、ライブまたは またはデリゲート

3)体験全体をアニメーション化するファンシーな方法はありますか?例えば。私は単に段落の残りの部分をクリックするときにslideDown()   それをもう一度クリックするとslideUp()が再び表示されます。

Yup, check out animate

4。)私が知らない最後のことは、折りたたまれた段落に小さなヒントとして3つの点を追加することができない理由です。   しようとしました:pの後には動作しませんでした!

これをチェックする reliddnofollow">フィドル、余分な要素(ここで使用されるスパン)を追加して非表示にする必要があります要求に応じ 。

お役に立てれば 。

1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript