Question

我正在尝试构建一个jquery下拉菜单，基本上我的左侧导航是下拉式的，我也有一个正确的部分，我试图让左侧导航的高度始终等于高度右边的部分，它在页面加载时工作正常，但当我点击左侧导航栏中的链接时，它下面的产品会显示，之前打开的产品会隐藏，但是我在点击它之前立即得到左侧导航的高度第二部分是隐藏的，因此它给了我错误的高度，我想我必须等待点击事件完全完成然后计算高度，但我不知道该怎么做，

test site to show what I mean

如果你点击女士服装然后男士服装左侧导航的高度不会增加，如果你点击男士服装然后女士服装合适的容器的高度太大，

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

此处指向Documentation的链接。

jquery下拉菜单的问题

1 个答案: