jquery - 更改 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 .单击 Logo 正下方的设备:化学品混合台链接。

Answer 1

检查你的状态来改变你的观点，不要检查你的观点来弄清楚你的状态。

就是不要把css放在你的JS里。不要检查内联样式以查看您是否设置了该样式，然后在响应中插入硬编码的 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();
    });
});

看看它清洁了多少？