如何根据到窗口边缘的距离使子菜单位置动态

Question

我正在尝试编写一个jQuery脚本，该脚本将从我的css class元素找到到浏览器窗口右边缘的距离，然后根据右侧的可用空间将子菜单下拉列表定位到右侧或左侧。此外，它还需要恢复到悬停时的默认设置。这是我到目前为止所掌握的，但计算不正确。

    $(document).ready(function(){
$('#dnnMenu .subLevel').hover(function(){
    if ($(window).width() - $('#dnnMenu .subLevel').offset().left - '540' >= '270')
    {
        $('#dnnMenu .subLevelRight').css('left', '270px');}
    else {$('#dnnMenu .subLevelRight').css('left', '-270px');}
});
    $(document).ready(function () {
function HoverOver() {
    $(this).addClass('hover');
}
function HoverOut() {
    $(this).removeClass('hover');
}
var config = {
    sensitivity: 2,
    interval: 100,
    over: HoverOver,
    timeout: 100,
    out: HoverOut
};
$("#dnnMenu .topLevel > li.haschild").hoverIntent(config);
$(".subLevel li.haschild").hover(HoverOver, HoverOut);
    });

基本上，我试着取当前窗口的宽度，减去到第一级子菜单浏览器左边缘的距离，减去两个元素的宽度，这将等于540px，以计算当第一级子命令悬停在上面时到窗口右边缘的距离。如果到我的第一级子菜单元素右侧的距离小于540px，则第二级子菜单css属性将更改为向左而不是向右的位置。我还知道，它需要在悬停后恢复到默认值，这样它就可以重新计算与菜单结构中其他位置的距离，并且仍然有足够的空间显示在第一级的右侧的第二级子菜单。这里是有关元素的css。

    #dnnMenu .subLevel{
      display: none;
      position: absolute;
      margin: 0;
      z-index: 1210;
      background: #639ec8;
      text-transform: none;}
    #dnnMenu .subLevelRight{
      position: absolute;
      display: none;
      left: 270px;
      top: 0px;}

这个网站还没有上线，我试着创建了一个jsfiddle，但看起来不对。如有任何帮助，我们将不胜感激！

谨致问候，马里奥

Answer 1

这是我为解决问题而编写的jQuery。

$(document).ready(function () {
$('#dnnMenu').mouseout(function () {
    if ((viewportRight - myRight) >= '540') {
        $('#dnnMenu .subLevelRight').css('left', '-270px');
    }
    else { $('#dnnMenu .subLevelRight').css('left', '270px'); }
   });
});
    $(document).ready(function () {
function HoverOver() {
    $(this).addClass('hover');
}
function HoverOut() {
    $(this).removeClass('hover');
}
var config = {
    sensitivity: 2,
    interval: 100,
    over: HoverOver,
    timeout: 100,
    out: HoverOut
};
$("#dnnMenu .topLevel > li.haschild").hoverIntent(config);
$(".subLevel li.haschild").hover(HoverOver, HoverOut);
});
    $(document).ready(function () {
$('#position1').mouseout(function () {
    var myLeft = $("#position1").offset().left;
    var myTop = $("#position1").offset().top;
    var myRight = myLeft + $("#position1").outerWidth();
    var myBottom = myTop + $("#position1").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }
    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position2').mouseout(function () {
    var myLeft = $("#position2").offset().left;
    var myTop = $("#position2").offset().top;
    var myRight = myLeft + $("#position2").outerWidth();
    var myBottom = myTop + $("#position2").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }
    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position3').mouseout(function () {
    var myLeft = $("#position3").offset().left;
    var myTop = $("#position3").offset().top;
    var myRight = myLeft + $("#position3").outerWidth();
    var myBottom = myTop + $("#position3").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }
    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position4').mouseout(function () {
    var myLeft = $("#position4").offset().left;
    var myTop = $("#position4").offset().top;
    var myRight = myLeft + $("#position4").outerWidth();
    var myBottom = myTop + $("#position4").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }
    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position5').mouseout(function () {
    var myLeft = $("#position5").offset().left;
    var myTop = $("#position5").offset().top;
    var myRight = myLeft + $("#position5").outerWidth();
    var myBottom = myTop + $("#position5").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }
    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position6').mouseout(function () {
    var myLeft = $("#position6").offset().left;
    var myTop = $("#position6").offset().top;
    var myRight = myLeft + $("#position6").outerWidth();
    var myBottom = myTop + $("#position6").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }
    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});
    $(document).ready(function () {
$('#position7').mouseout(function () {
    var myLeft = $("#position7").offset().left;
    var myTop = $("#position7").offset().top;
    var myRight = myLeft + $("#position7").outerWidth();
    var myBottom = myTop + $("#position7").outerHeight();
    var viewportRight = $(window).width() + $(window).scrollLeft();
    var viewportBottom = $(window).height() + $(window).scrollTop();
    if ((viewportRight - myRight) >= '400') {
        $('#dnnMenu .subLevelRight').css('left', '270px');
    }
    else { $('#dnnMenu .subLevelRight').css('left', '-270px'); }
   });
});

这是css

    #position1{
background:transparent no-repeat;
width:110px;
height:2px;
margin-left:15px;
margin-top:-2px;
position:absolute;}
    #position2{
background:transparent no-repeat;
width:118px;
height:2px;
margin-left:127px;
margin-top:-2px;
position:absolute;}
#position3{
background:transparent no-repeat;
width:153px;
height:2px;
margin-left:247px;
margin-top:-2px;
position:absolute;}
#position4{
background:transparent no-repeat;
width:178px;
height:2px;
margin-left:402px;
margin-top:-2px;
position:absolute;}
#position5{
background:transparent no-repeat;
width:213px;
height:2px;
margin-left:582px;
margin-top:-2px;
position:absolute;}
#position6{
background:transparent no-repeat;
width:106px;
height:2px;
margin-left:797px;
margin-top:-2px;
position:absolute;}
#position7{
background:transparent no-repeat;
width:78px;
height:2px;
margin-left:905px;
margin-top:-2px;
position:absolute;}

我添加的唯一其他东西是直接位于HTML中其他菜单项下的div id

<div id="position1"></div><div id="position2"></div><div id="position3"></div><div id="position4"></div><div id="position5"></div><div id="position6"></div><div id="position7"></div>

它只是不确定是否所有内容都写得完美。如果你能看到一些错误，请告诉我，这样我就可以清理我的代码。