jQuery下拉菜單的問題

Question

我正在嘗試構建一個jQuery下拉菜單，基本上我有一個下拉的左側導航欄，也有一個右側部分，我試圖使左側導航欄的高度始終等於右側導航欄的高度部分，它在頁面加載時效果很好，但是當我單擊左側導航欄中的鏈接時，將顯示其下方的產品，並且之前打開的產品將隱藏，但是單擊該按鈕后，我便會獲得左側導航的高度在第二部分隱藏之前，它給了我錯誤的高度，我認為我必須等待click事件完全完成然后計算高度，但是我不知道該怎么做，

測試網站以顯示我的意思

如果您單擊女士服裝，然后單擊男士服裝，則左側導航欄的高度不會增加；如果您單擊女士服裝，然后單擊位於右側容器中的女士服裝的高度太大，

jQuery.noConflict();

jQuery(document).ready(function() {
var level2 = jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.level2 > a');

    level2.click(function(e) {
        e.preventDefault();
        var navId = jQuery(this).parent().attr('class').substr(7,9);
        jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.level2 ul.level2 li.level3 > a').slideUp();
        jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.'+navId+' ul.level2 li.level3 > a').slideDown();

        var navHeight = jQuery('div.page div.nav-container').height();
        var mainContainerHeight = jQuery('div.main-container').height();

        if (navHeight > mainContainerHeight) {
            jQuery('div.main-container').height(navHeight); 
        }else {
            jQuery('div.page div.nav-container').height(mainContainerHeight);
        }
});
});

任何幫助，將不勝感激。

Answer 1

您可以將一個回調函數添加到slideUp(duration, callback)和slideDown()並在該回調中獲得容器的最終大小。

jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.level2 ul.level2 li.level3 > a').slideUp('slow', onSlideUpDownComplete);
jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.'+navId+' ul.level2 li.level3 > a').slideDown('slow', onSlideUpDownComplete);


function onSlideUpDownComplete()
{
        var navHeight = jQuery('div.page div.nav-container').height();
        var mainContainerHeight = jQuery('div.main-container').height();

        if (navHeight > mainContainerHeight) {
            jQuery('div.main-container').height(navHeight); 
        }else {
            jQuery('div.page div.nav-container').height(mainContainerHeight);
        }
}

這里是文檔鏈接。