2

別の DIV のクリック/アンクリックで DIV のマージンを変更しようとしています。

今すぐこれを持ってください：

$(document).ready(function(){
    $(".model_drop_pane").hide();
    $(".show-hide").click(function() {
        if ($("#body_machine_novideo").css('margin-top', '50px')) {
            $("#body_machine_novideo").css('margin-top', '300px');
            $(".model_drop_pane").slideToggle();
      } else {
            $("#body_machine_novideo").css('margin-top', '50px');
            $(".model_drop_pane").slideToggle();
    }
    });
});

アイデアは次のとおりです。.show-hide DIV をクリックすると、 DIV が50 から 300px に#body_machine_novideo変更され、DIV も切り替えられます。この部分は機能します。margin-top.model_drop_pane

問題: .show-hide DIV をもう一度クリックすると (「クリック解除」)、.model_drop_paneDIV は正常に切り替わりますが、DIV のマージン値は#body_machine_novideo50px にリセットされず、300px のままです。

問題の実際のデモは、ここにあります。ロゴのすぐ下にある [Equipment: Chemical Mixing Stand] リンクをクリックします。

4

3 に答える 3

1

の値を比較していますが$("#body_machine_novideo").css('margin-top')、実際にすべきことは.toggleClass()メソッドを使用してクラスを切り替えることです。

class余白を追加するには、 を作成する必要があります。プレゼンテーションの問題は CSS に任せ、動作や対話性は JavaScript に任せます。さらに良いことに、将来 の値margin-bottomを変更する必要が生じた場合でも、スタイルシートを変更するだけで、JavaScript は引き続き期待どおりに機能します。

// JavaScript
$(".show-hide").click(function(event) {
    $("#body_machine_novideo").toggleClass('more');
    $(".model_drop_pane").slideToggle();
    event.preventDefault(); // Added: prevent the clicking event to execute normally
});

そしてあなたのCSS：

/* CSS */
#body_machine_novideo { margin-top:50px; }
#body_machine_novideo.more { margin-top:300px; }
于 2012-12-19T18:14:49.183 に答える
1

状態を調べてビューを変更します。状態を把握するためにビューを調べないでください。

つまり、JS に css を入れないでください。インライン スタイルを調べて、そのスタイルが設定されているかどうかを確認してから、repsonse にハードコードされた css 値を挿入しないでください。要素が特定のクラスを持っているかどうかはあなたの状態です。また、CSS は特定のクラスを特定の方法で単純にレンダリングします。

CSS

#body_machine_novideo {
  margin-top: 50px;
}

#body_machine_novideo.open {
  margin-top: 300px;
}

JS

$(document).ready(function(){
    $(".model_drop_pane").hide();
    $(".show-hide").click(function() {
        $("#body_machine_novideo").toggleClass('open');
        $(".model_drop_pane").slideToggle();
    });
});

それがどれだけきれいか分かりますか？

于 2012-12-19T18:19:38.963 に答える
0

if 条件を変更する

if ($("#body_machine_novideo").css('margin-top', '50px'))
// This part is always true.
// You are not comparing the values in the first place

に

if ( parseInt($("#body_machine_novideo").css('margin-top'),10) === 50)

また

if ( +$("#body_machine_novideo").css('margin-top') === 50)

また、コードの残りの部分が実行されない可能性があるため、コンソールでエラーが発生しているようです..

オブジェクト [object Object] にはメソッド「fancybox」がありません

于 2012-12-19T18:14:37.857 に答える