代码之家 › 专栏 › 技术社区 › HDP

下拉菜单不在浏览器屏幕上-引导4

bootstrap-4 css3 html5 jquery javascript

HDP · 技术社区 · 6 年前

我已经尝试在悬停时构建多下拉列表。但是,子下拉菜单正从浏览器屏幕中消失。 I want to reverse dropdown menu position when which is go out of browser screen.

在这里,我尝试使用下面的jquery来添加动态类,当下拉菜单离开屏幕时。但是,它不能正常工作。 它在每个下拉菜单中添加类,而不是离开浏览器屏幕。。

应仅适用于浏览器屏幕之外的内容。

我想将退出浏览器屏幕的每个下拉列表反转。。

这里可能有什么问题?

$('menu.DropDown menu').each(function()。{ var menu=$('menu').offset(); var下拉列表=$(this).parent().offset(); var docw=$(“menu”).width(); var i=(DropDown.Left+$(this).width())>(docw); 如果(!)i){ $(this).addClass(“DropDown-Reverse”); }其他{ $(this).removeClass(“DropDown-Reverse”); } (}); 演示:https://jsfiddle.net/gn3koo0w/1/ 在这里,我尝试使用下面的jquery来添加动态类,当下拉菜单离开屏幕时。但是,它不能正常工作。它在每个下拉菜单中添加类,而不是离开浏览器屏幕。应仅适用于退出浏览器屏幕的。我想反转浏览器屏幕外的每个下拉列表。 $('#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/

2 回复 | 直到 6 年前

CodeThing 6 年前

这可能不是一个合适的解决方案,但它应该得到你想要的。用这个替换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);

希望这有帮助!

HDP 6 年前

我在这里找到了完美的解决方案- Detect if dropdown navigation would go off screen and reposition it

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