0

CSS スタイルの背景とテキストを jQuery アクションにスムーズにスライドさせるにはどうすればよいですか? もう一度クリックして閉じると、背景色が消え、テキストが上にスライドします。背景をそのままにして、テキストと一緒にスライドさせたい.

また、あるアクションをクリックして別のアクションを閉じる方法を理解しようとしています。私のコードはこちらです。

4

2 に答える 2

1

完全に明らかではありませんが、次のコード行では:

  $(this).siblings().slideToggle('slow').parent().toggleClass('expanded');

slideToggle関数は実際には非同期で実行されます。つまりtoggleClass、アニメーションが終了する前に実行される可能性が高くなります。slideToggleの jQuery ドキュメントを読むcallbackと、オプションのパラメーターとして関数を受け入れることがわかります。アニメーションが完了した後にコードの一部が実行されることを確認したいときはいつでも、コールバックを使用してください。例えば：

var _this = this; // because this will point to a different object inside the callback
$(this).siblings().slideToggle('slow', function() {
   $(_this).parent().toggleClass('expanded');
});

またはそのようなもの。どんな最終結果を求めているかは、すぐにはわかりません。しかし、うまくいけば、これはあなたの途中であなたを助けるでしょう.

于 2012-12-23T07:04:16.620 に答える
0

バックグラウンドの問題の場合:

背景色を維持したいコンテナーにボックスタイプの css プロパティを追加してみてください。 

// I.e.,
box-sizing: border-box
// @see https://developer.mozilla.org/en-US/docs/CSS/box-sizing

それでもうまくいかない場合は、要素をフローティングして、そのフロートを内部からクリアしてみてください。

<div style="float: left; position: relative; width: 320px; height: 240px; margin: 10px; background: #ff0000;">
  <p>Content</p>
  <br style="clear: both;" />
</div>

フロートは、他に関係なく、幅と背景色を強制します。

そして、次のアクションを開く前にアクションを閉じることについて は、次のリンクでスクリプトを見てください。これは私が数年前に書いたスクリプトですが、やりたいことの基本的なフレームワークのアイデアが含まれています。

http://abi.edu/js/resources-page.js

トグル情報アイテムは、すべての情報アイテムを非表示にし、id が渡された情報アイテムを表示します。つまり、リンクをクリックするたびに、すべて非表示にしてクリックしたものを表示します。

また、約 1 年前の別のクリーンな例: http://abitribeca.com/index/about

左側の列のリンクをクリックして、コンテンツ エリアの変更を確認します。

また、これらは単純な例であり、次のようなより複雑なこともできることを覚えておいてください。

http://elycruz.com/portfolio

@note この最後の例は、php バックエンドから json を処理する方法を学んでいたため、少し面倒です (ただし、良い例です)。

于 2012-12-23T07:12:14.633 に答える