0

ここにある Cloudania Citizens ページの効果を再現しようとしています。

http://cloudania.com/citizens/

画像をクリックすると、拡大したり折りたたんだりするという基本的な効果だけを探しています。

webcloud で jQuery-Collapse を使用していますが、画像をインラインに保つことができません。

だから私はそれがページを開いたときにこのように見えるようにしたい

http://i.stack.imgur.com/Lva48.png

次に、ボックス 1 をクリックすると、次のようになります。

http://i.stack.imgur.com/SSAfV.png

ご協力いただきありがとうございます

4

2 に答える 2

6

Jquery のサイトにアクセスするのが本当に退屈なのはわかっていますが、作業は単純であるほど良いのです。スライド トグルと適切な CSS を使用してみてください。これは簡単に実現できます。スライド トグルの詳細については、http: //api.jquery.com/slideToggle/を参照してください。

  1. コンテンツをスライドトグルするには、各ボックスを onClick にする必要があります1、
  2. コンテンツ 1 に 7 つの異なるコンテンツすべてを絶対位置および hidden / dispaly:none; として含める必要があります。
  3. 次に、各ボックス onClcick でも、関連する非表示の div を表示するように指示する必要があります。
  4. 別の行のいずれかのボックスがクリックされた場合は、開いている他の content1 をスライドトグルして閉じる必要があります。

単純。

于 2012-05-07T07:39:40.450 に答える
3

これは jquery を使えば簡単です。slideDown() を使用して div を表示します。

http://api.jquery.com/slideDown/

そして非表示にするためのslideUp（）

于 2012-05-07T07:29:01.487 に答える