引导程序：-手风琴postion.left在鼠标悬停时出错

Question

我已将boostap手风琴转换为可用于悬停的下拉菜单，因此效果很好。

$('.menu > [data-toggle="collapse"]').on('mouseenter', function() {
    $(this).parents('.menu').find('.collapse.submenu').collapse('show');
    lastmenu('.menu > [data-toggle="collapse"]', '.menu', '.collapse.submenu', '.main-content', 'menu-last')
})

直到我添加了这段代码

那么它会自动检测到容器的最后一个下拉式手风琴并管理其位置

$('.menu > [data-toggle="collapse"]').on('mouseenter', function() {
    $(this).parents('.menu').find('.collapse.submenu').collapse('show');
    lastmenu('.menu > [data-toggle="collapse"]', '.menu', '.collapse.submenu', '.main-content', 'menu-last')
})


function lastmenu(toggleSelector, toggleParent, dropdownMenu, containerWidth, className) {
    $element = $(this).parents(toggleParent).find(dropdownMenu);
    $offset = $element.offset();
    $left = $offset.left;
    $width = $element.width();
    $containerWidth = $(containerWidth).width();
    console.log($containerWidth);

    elementVisibility = ( $left + $width <= $containerWidth );
    console.log(elementVisibility);
    if (!elementVisibility) {
        $element.addClass(className);
    } else {
        $element.removeClass(className);
    }

}

我检查了一下并指出，如果我做这样的事情可以解决，但这不是正确的解决方法。

我所做的事情已经添加了我的折叠功能

$(this).parents('.menu').find('.collapse.submenu').collapse('show');

现在像这样可以工作

$('.menu > [data-toggle="collapse"]').on('mouseenter', function() {

    $element = $(this).parents('.menu').find('.collapse.submenu');
    $collapseShow = $element.collapse('show');  /// Added This Line
    console.log($element);
    $offset = $element.offset();
    console.log('Offset' + $offset);
    $left = $offset.left;
    $width = $element.width();
    $containerWidth = $('.main-content').width();
    console.log($containerWidth);

    elementVisibility = ( $left + $width <= $containerWidth );
    console.log(elementVisibility);
    if (!elementVisibility) {
        $element.addClass('menu-last');
    } else {
        $element.removeClass('menu-last');
    }


})