更改css onclick/unclick

Question

尝试通过单击/取消单击另一个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时，#body_machine_novideo DIV将其margin-top从50像素更改为300px，同时.model_drop_pane DIV也被切换。这部分起作用了。

问题:在第二次点击.show-hide DIV (“取消点击”)时，.model_drop_pane DIV会正常切换，但是#body_machine_novideo DIV的边距值不会重置回50px，而是保持在300px。

A working demo of the problem can be found here。单击徽标下方的Equipment: Chemical Stand链接。

Answer 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; }

Answer 2

检查你的状态来改变你的视图，而不是检查你的视图来弄清楚你的状态。

也就是说，不要将css放在JS中。不要检查内联样式来查看是否设置了该样式，然后在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();
    });
});

看到那多干净了吗？

Answer 3

更改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)

此外，您似乎在控制台中有一个错误，由于该错误，代码的其余部分可能无法执行。

对象没有方法“fancybox”