更改css onclick/unclick

試圖通過單擊/取消點擊另一個DIV來更改DIV的邊距。更改css onclick/unclick

現在這一權利：

$(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隱藏DIV的點擊，在#body_machine_novideo DIV改變它的margin-top從50至300像素，並且還.model_drop_pane DIV翻轉。這部分工作。

問題：在點擊.show隱藏DIV的第二時間（「unclicking」），則.model_drop_pane DIV切換，因爲它應該，然而#body_machine_novideo DIV的邊緣值未被重置回50像素，和遺體在300px。

A working demo of the problem can be found here。點擊徽標下方的設備：化學混合站鏈接。

來源

2012-12-19 Graham T

更改，如果條件

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)

而且你似乎有由於其在控制檯中的錯誤剩下的部分該代碼可能不會執行..

對象的翻譯：有沒有方法「的fancybox」

來源

2012-12-19 18:14:37

您使用.toggleClass()方法比較$("#body_machine_novideo").css('margin-top')價值，但你應該做的是切換類。

您應該創建一個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-19 18:14:49

檢查你的狀態來改變你的看法，不檢查你的看法找出你的狀態。

也就是說，不要把CSS放在你的JS中。不要檢查內聯樣式，看看是否已經設置了該樣式，然後在repsonse中嵌入硬編碼的CSS值。元素是否具有特定類別是狀態。而CSS只是以某種方式渲染某些類。

CSS

#body_machine_novideo { 
    margin-top: 50px; 
} 

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

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

看看有多少清潔劑是什麼？

來源

2012-12-19 18:19:38

更改css onclick/unclick

回答

相關問題