Javascript 下拉菜单确实会从浏览器屏幕中消失-引导4

我已经尝试在hover上构建多个下拉列表。但是，子下拉菜单将退出浏览器屏幕当退出浏览器屏幕时，我想反转下拉菜单位置。

在这里，我尝试使用下面的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');
    }
});

---

演示：

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

---

希望这有帮助

我在这里找到了完美的解决方案-

$（函数（）{
$（“.dropdown li”）.on（'mouseenter mouseleave'，函数（e）{
如果（$（'.dropdown menu'，this）.length）{
var elm=$（'.dropdown menu'，this）；
var off=elm.offset（）；
var l=关闭。左侧；
var w=榆树宽度（）；
var docW=$（window.width（）；
变量IsEntrelyVisible=（l+w当您检查
下拉列表时，应在下拉列表变为可见后进行检查。左
，0表示不可见dropdowns@LaljiTadhani请尝试理解我的查询。我想要的不是静态解决方案。我想要反转浏览器屏幕上的每个下拉列表。谢谢您的回答。但是，这不能正常工作。这里，不起作用。当第三个下拉菜单退出屏幕时。我们使用mega菜单。因此，我们希望找到适当的解决方案。我想反转每个退出屏幕的下拉菜单。谢谢。
$(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');
            }
        }
    });
});