當#div切換 - 得到它的高度並移動.divs

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

});