下拉菜单确实在浏览器屏幕上消失了-引导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

这可能不是一个合适的解决方案，但它应该可以满足您的要求。 以此替换您的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);

希望这可以帮助！

Answer 2

我在这里找到了完美的解决方案表单- 检测下拉导航是否会在屏幕外消失并重新定位

$(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/