Выпадающее меню не отображается на экране браузера - начальная загрузка 4

Question

У меня есть попытка построить мульти выпадающий при наведении курсора. Но выпадающее меню не отображается на экране браузера. Я хочу изменить положение выпадающего меню, когда оно выходит из экрана браузера.

Здесь я попытался использовать следующий jQuery для добавления динамического класса, когда выпадающий список выходит за пределы экрана. Но, это не работает должным образом. Он добавляет addClass в каждом раскрывающемся меню, а не выключает экран браузера.

Должно применяться только для тех, которые выходят из экрана браузера.

Я хочу отменить каждый выпадающий список, который выходит из экрана браузера.

Что здесь может быть не так?

$('#menu .dropdown-menu').each(function() {
    var menu = $('#menu').offset();
    var dropdown = $(this).parent().offset();
    var docW = $("#menu").width();

    var i = (dropdown.left + $(this).width()) > (docW);

    if (!i) {
        $(this).addClass('dropdown-reverse');
    } else {
        $(this).removeClass('dropdown-reverse');
    }
});

Демо: https://jsfiddle.net/gn3koo0w/1/

Answer 1

Я нашел здесь идеальное решение - Определите, не выпадет ли навигация из выпадающего меню, и переместите его

$(function () {
    $(".dropdown li").on('mouseenter mouseleave', function (e) {
        if ($('.dropdown-menu', this).length) {
            var elm = $('.dropdown-menu', this);
            var off = elm.offset();
            var l = off.left;
            var w = elm.width();
            var docW = $(window).width();

            var isEntirelyVisible = (l + w <= docW);

            if (!isEntirelyVisible) {
                $(elm).addClass('dropdown-reverse');
            } else {
                $(elm).removeClass('dropdown-reverse');
            }
        }
    });
});

Обновленная демоверсия: https://jsfiddle.net/gn3koo0w/166/

Answer 2

Возможно, это неправильное решение, но оно должно получить то, что вы хотите. Замените свой код jquery этим и попробуйте.

// dropdown menu on hover 
var $screensize = $(window).width();
$('.dropdown').on("mouseover", function() {

            $(this).find('> .dropdown-menu').stop(true, true).slideDown('fast');
            $(this).bind('mouseleave', function() {

                $(this).find('> .dropdown-menu').stop(true, true).css('display', 'none');
        });
});

function foo() {
$('.dropdown-menu').each(function() {
if ($(this).is(':visible')){
        var menu = $('#menu').offset();
        var dropdown = $(this).parent().offset();
        var docW = $("#menu").width();
        var i = (dropdown.left + $(this).width()) > (docW);
        if (i == true) {
            $(this).addClass('dropdown-reverse');
        } else {
            $(this).removeClass('dropdown-reverse');
        }
    }
    }); 
}
window.setInterval(foo, 100);

Надеюсь, это поможет!