1

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

    $(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，但它看起来不正确。任何帮助将不胜感激！

最好的问候，马里奥

4

1 回答 1

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;}

我唯一添加的另一件事是 div id 直接位于我在 HTML 中的其他菜单项下

<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>

它只是不确定是否一切都写得很完美。如果您发现有问题，请告诉我，以便我清理代码。

于 2012-08-30T21:36:35.640 回答