質問: jQuery:animate addClass() - コンテナを展開しますか? 次の問題:私は最初の行を表示したいだけのテキストがたくさんある単純な段落を持っています。だから、実際にはおしゃれな人です。最初の行をクリックすると、その段落はアニメーション化され、その高さ(および幅)になります。今私は、クラスcollpsedを削除することによってそうしています... ``` Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ``` **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!*
回答: 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**