Question

我有一个切换div（#toggle-div），下面我有一些固定的div（.fixed-div）。由于页面上的某些功能，它们需要被修复...有没有办法 - 当按下切换按钮时 - 获得#toggle-div的高度并设置.fixed-div的上边距相同像素数量？我找到了以下代码：

var boxheight = ("#toggle-div").height();
$(".fixed-div").css({ margin-top: boxheight});

对我来说似乎做了我想做的事情，但是当添加到下面的切换代码中时它似乎不起作用...你对如何做到这一点有什么建议吗？

这是我的切换代码：

$("#toggle-hit").click(function(e) {
    e.preventDefault();
    var $this = $("#toggle-div");
    $this.slideToggle("slow");
});

编辑：好的，现在我已经部分找到了解决方案。

$(".fixed-div").css("margin-top", 300);

工作完美。但每当我试图涉及#toggle-div的高度时，它都会失败;

var myBox = $('#toggle-div');
$('.fixed-div').css({margin-top: myBox.outerHeight()});

是不是因为它是一个slideToggle？无法理解为什么它不起作用。是否有人知道为什么会这样做？

编辑2：Okey，所以我有点工作，等待切换完成，然后获得#toggle-div的高度，然后在.fixed-div上做一点动画所以它不只是跳下来。

var timing = setTimeout(function () {setHeight()}, 605);
function setHeight() {
    var boxes = $("#toggle-div").outerHeight() * 0.5;
$(".fixed-div").animate({
    marginTop: boxes + "px"}, 1000 );
};

到目前为止一切顺利。但是，当我点击切换按钮关闭#toggle-div时，它实际上会增加更多的margin-top。我不明白为什么会这样，'因为#toggle-div的高度应为0.有没有人对此提出建议？

Answer 1

这是一种方式，它应该添加或删除.fixed-div的上边距，具体取决于#toggle-div的可见性状态：

$toggleHit = $('#toggle-hit');
$toggleElm = $('#toggle-div');
$fixedElm = $('.fixed-div');

$toggleHit.on('click', function(e) {
    e.preventDefault();

    $toggleElm.slideToggle('slow', function () {
        var isVisible = $toggleElm.is(':visible');
        var marginTop = isVisible ? $toggleElm.outerHeight() : 0;
        $fixedElm.css('margin-top', marginTop);
    });

});

当#div切换时 - 获取其高度并移动.divs

1 个答案: