2011-12-31 2 views
2

私が作成したjqueryの "click function"でdivの展開/折りたたみを行いたいと思います。私の質問と他の質問との違いは、「折りたたまれた」状態にあるdivのために最大サイズを "120px"に保つ必要があり、高さを "100%"にする必要があるということです「拡張された」状態にある。JqueryとCSSでエキスパンドと折りたたみを行う

各親div(すなわちdiv id = "1")は、他の場所ですべて処理されるクエリに応じて、SQLデータベースから動的に作成されます。 1ページに複数のdivが表示されます(ユーザーのクエリに応じて)。ここで

は、これまでの私のコードにjsfiddle URLです:http://jsfiddle.net/m22Gu/17/

+0

あなたの質問は何ですか?クリックしたときにクラスを正しく追加/削除し、そのクラスのCSSを使用して状態を制御しています。これは、このようなことをするための推奨された方法です。あなたは両方の州のための特定のCSSの助けを求めていますか? – jfriend00

+0

うーん..問題は、それが私が期待したことをしていないということです。 divをクリックして何が起こるかを確認してください。それはちょうど私のために上下にバウンスする。ありがとう。 – tushar747

+0

完全なテキストが見えるようにdivを展開する方法を知りたいです。ユーザーがその表示を終了すると、ユーザーはそれをクリックできるはずです。 – tushar747

答えて

2

はあなたが後にしているものに、この近いですか?あなたが表示されたままにコンテンツをしたい場合は、slideToggleを使用することはできません

DEMO HERE

。単にdivの高さをアニメートするだけです。

+0

うわー!これはまさに私が探していたものです。私はこれをやろうとしている3日間を過ごした後、私がどれほど幸せであるかを示す方法は分かりません(私はまだ学んでいます)。ちょうど1つの簡単な方法、私はそれらをすべて記述欄と一緒に展開させるにはどうしますか?それは現時点で非常に奇妙に見えます。 – tushar747

+0

うれしいこと..それらをすべて展開するには、クリックイベントを親divに移動して、子をアニメーション化する必要があります。ここをクリックしてください:(http://jsfiddle.net/m22Gu/24/)注:同じIDを持つ2つの要素があります。親divのクラスを追加して、clickイベントを呼び出すことができました。 – Scott

+0

これはもううまく機能します。もう一つ問題があります! :/。何が起こるかは、(私の実際のページ上で)それをクリックすると右のdivが他の2つのdivの下に最も移動する方法です。あなたはこの問題の原因を知っていますか? – tushar747

関連する問題