Bootstrap: - Ошибка положения аккордеона при наведении мыши - PullRequest
Новая
       13

Bootstrap: - Ошибка положения аккордеона при наведении мыши

0 голосов
/ 20 марта 2019

Я преобразовал аккордеон 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');
    }


})
...