javascript - Wordpress 3 级水平导航 - 需要 jquery/javascript 帮助对齐

Question

我一直在尝试实现 3 级水平导航，但我卡在了最后一个。我必须在最后一级使用绝对位置，因为将其设置为相对位置会将菜单项宽度绑定(bind)到父级的宽度，父级是第二级中的菜单项。

我对 javascript/jquery 不是很熟悉，但我想确保子元素始终位于父元素之下。

http://generatedesignstaging.com/safari/safaris/value-safaris/the-beast-retreat/

Answer 1

这是我想出的，而且效果很好。

jQuery(function($) {
    $(window).on('resize', function() {
    var submenu = jQuery('#top-menu').position().top+jQuery('#top-menu').outerHeight(true);
      jQuery('.sub-menu').css('top',submenu);

/** 3rd level navigation top position **/ 
var height_sm = jQuery('#top-menu').find('.sub-menu').outerHeight();
jQuery('.menu-item .menu-item > .sub-menu').css('top', height_sm);   

/** Maximum width of the page **/  
var container = $('#page-container').width(); 

/** Compute horizontal position of the 3rd menu **/ 
$('#top-menu').find('.sub-menu .menu-item-has-children').each(function() { 
    var item = $(this).children('.sub-menu').width(); 
    var position = $(this).position();
    var total = item + position.left; 
    if (total > container){
        var ofset = total-container; 
        var calc = position.left - ofset;  

        $(this).children('.sub-menu').css('left',calc);
    }
    else{
    $(this).children('.sub-menu').css('left',position.left);
}
}); 
    }).trigger('resize');
});