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（＆＃34;取消选择＆＃34;）时，.model_drop_pane DIV按原样切换，但是{{1}的边距值DIV不会重置为50px，并保持在300px。

A working demo of the problem can be found here。单击徽标下方的设备：化学混合支架链接。

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值。元素是否具有特定类是 state 。 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)

此外，您似乎在控制台中出现错误，因为代码的其余部分可能无法执行..

对象[object Object]没有方法'fancybox'

更改css onclick / unclick

3 个答案: