Jquery 更改css onclick/unclick

尝试通过单击/取消单击另一个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将其

边距顶部

从50像素更改为300像素，同时切换

.model_drop_窗格

DIV。这部分是有效的

问题：在第二次单击.show hide DIV（“松开”）时，

.model\u drop\u窗格

DIV会按其应该的方式切换，但是

\body\u machine\u novideo

DIV的边距值不会重置回50px，并保持在300px

---

。单击徽标正下方的设备：化学品混合台链接。

更改您的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”

您正在比较

$（“\body\u machine\u novideo”）.css（'margin-top'）

的值，但您真正应该做的是使用

.toggleClass（）

方法切换类

您应该创建一个

类

，以添加额外的边距。将表示问题留给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; }

---

检查您的状态以更改视图，而不是检查视图以了解您的状态

也就是说，不要把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();
    });
});

JS

#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();
    });
});

看看那有多干净