2

尝试通过单击/取消单击另一个 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_novideoDIV 将其margin-top从 50 像素更改为 300 像素，并且.model_drop_paneDIV 也被切换。这部分有效。

问题：第二次单击 .show-hide DIV（“取消单击”）时，.model_drop_paneDIV 会按应有的方式切换，但是#body_machine_novideoDIV 的边距值不会重置回 50px，而是保持在 300px。

可以在此处找到该问题的工作演示。单击徽标下方的设备：化学混合站链接。

4

3 回答 3

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

看看清洁度有多高？

于 2012-12-19T18:19:38.963 回答
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; }
于 2012-12-19T18:14:49.183 回答
0

改变你的 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'

于 2012-12-19T18:14:37.857 回答