我的问题

Question

我正在尝试在悬停时创建一个下拉菜单，如下所示。

在网站的标题下。

enter image description here

我是用jQuery做的，我使用事件mouseEnter和鼠标离开。使用以下代码。

 var LastThis = null;
                $(".divOpener, #floatingNewNav")
                .mouseleave(function(event)
                {
                    console.log(event);
                    if($(event.toElement).attr("id") != "floatingNewNav") // do not close since we leaved the element but we got on the floating nav.
                    {
                        $("#floatingNewNav").hide(0);

                        if(LastThis.attr("id") == "ShopByBrand")
                        {
                            LastThis.removeClass("NavSelected");
                            $("#"+LastThis.attr("id")+"_Nav").css("display","none");
                        }
                        if(LastThis.attr("id") == "ShopByCategory")
                        {
                            LastThis.removeClass("NavSelected");
                            $("#"+LastThis.attr("id")+"_Nav").css("display","none");
                        }
                        if(LastThis.attr("id") == "ShopByPrice")
                        {
                            LastThis.removeClass("NavSelected");
                            $("#"+LastThis.attr("id")+"_Nav").css("display","none");
                        }
                    }
                });
                $(".divOpener")
                .mouseenter(function()
                {
                    LastThis = $(this);
                    if($(this).attr("id") == "ShopByBrand")
                    {
                        $("#"+$(this).attr("id")+"_Nav").css("display","block");
                        $(this).addClass('NavSelected');
                    }
                    if($(this).attr("id") == "ShopByCategory")
                    {
                        $("#"+$(this).attr("id")+"_Nav").css("display","block");
                        $(this).addClass('NavSelected');
                    }
                    if($(this).attr("id") == "ShopByPrice")
                    {
                        $("#"+$(this).attr("id")+"_Nav").css("display","block");
                        $(this).addClass('NavSelected');
                    }
                    var DivPosition = $(this).parent().position();
                    var Position = $(this).position();

                    var curTop = DivPosition.top;
                    var curLeft = Position.left;
                    var curWidth = $(this).width();
                    var curHeight = $(this).parent().height();
                    var DivWidth = $(this).parent().width();

                    var WidthOfNav = 400;

                    var OffSetLeft = (curLeft+(curWidth/2)-(WidthOfNav/2)+WidthOfNav)-(DivPosition.left+DivWidth);
                    var OffSetLeft = (OffSetLeft>0?OffSetLeft:0);

                    $("#floatingNewNav").css("position","absolute");
                    $("#floatingNewNav").css("height","100px");
                    $("#floatingNewNav").css("top",(curTop+curHeight)+"px");
                    $("#floatingNewNav").css("left",((curLeft+(curWidth/2))-(WidthOfNav/2))-OffSetLeft+"px");
                    $("#floatingNewNav").css("width",WidthOfNav+"px");

                    $("#floatingNewNav").show(0);
                });

HTML

 <div id="newNavDiv">
                        <span><form style="display: inline-block;" action="search.php" method="get"><input id="SearchBar" name="q" type="text"></form></span>
                        <div class="SearchButtonDiv"><input id="SearchButton" type="button" value="SEARCH"></div>
                <span class="NewNavSeparator"></span>
                <div id="Special" style="color: red;">
                    SPECIALS
                </div>
                <span class="NewNavSeparator"></span>
                <div id="ShopByBrand" class="divOpener">
                    SHOP BY<br/>BRAND
                </div>
                <span class="NewNavSeparator"></span>
                <div id="ShopByCategory" class="divOpener">
                    SHOP BY<br/>CATEGORY
                </div>
                <span class="NewNavSeparator"></span>
                <div id="ShopByPrice" class="divOpener">
                    SHOP BY<br/>PRICE
                </div>
            </div>
            <div id="floatingNewNav">
                <div id="ShopByBrand_Nav"></div>
                <div id="ShopByCategory_Nav"></div>
                <div id="ShopByPrice_Nav"></div>
            </div>

CSS

#WebsiteHeader
        {
            height: 170px;
            background: url("Photo/header.png") no-repeat top;
            background-size:100%;
        }
        #NewNavBar
        {
            height: 42px;
            background: url("Photo/newNavigator.png") no-repeat top;
            background-size:100%;

            padding: 4px;
            text-align: center;
        }
        #newNavDiv
        {
            display: inline-block;
            width: 960px;
            text-align: right;
        }
        #SearchBar
        {
            font-size: 16px;
            color: grey;

            width: 245px;
            height: 24px;
            padding-left: 5px;
            background-color: #ffffff;

            border-radius: 4px 4px 4px 4px;
            -moz-border-radius: 4px 4px 4px 4px;
            -webkit-border-radius: 4px 4px 4px 4px;
            border: 1px solid #c7c7c7;
        }
        .SearchButtonDiv
        {
            display: inline-block;
        }
        #SearchButton
        {
            color:#ffffff;
            font-size: 13px;

            height: 30px;
            background-color: red;

            padding: 8px;

            border-radius: 4px 4px 4px 4px;
            -moz-border-radius: 4px 4px 4px 4px;
            -webkit-border-radius: 4px 4px 4px 4px;
            border: 0px solid;
        }
        #Special
        {
            vertical-align: middle;
            width: 130px;
            display: inline-block;
            text-align: center;

            color: #ffffff;
            font-family: "Arial";/* for firefox*/
            font-family: "Arial Black";/* if browser have the font it will overide arial*/
            font-weight:900;/* for firefox*/
            font-size: 13px;
            font-style: italic;
        }
        .divOpener
        {
            vertical-align: middle;
            width: 140px;
            display: inline-block;
            text-align: center;

            color: #ffffff;
            font-family: "Arial";/* for firefox*/
            font-family: "Arial Black";/* if browser have the font it will overide arial*/
            font-weight:900;/* for firefox*/
            font-size: 13px;
            font-style: italic;
        }
        .NewNavSeparator
        {
            border-right: 1px rgba(245, 245, 245, 0.70) solid;
            margin-right: 5px;
            margin-left: 6px;
            height: 30px;
        }
        #MainPagesLinks
        {
            padding-bottom: 0;
        }
        #MainPagesLinks a
        {
            text-align: center;
            color:#ffffff;
            text-decoration: none;

            font-size: 13px;

            width: 75px;

            display: inline-block;
            background-color: red;

            padding-left: 4px;
            padding-right: 4px;

            border-radius: 4px 4px 0px 0px;
            -moz-border-radius: 4px 4px 0px 0px;
            -webkit-border-radius: 4px 4px 0px 0px;


            border-top: 1px solid rgba(255,240,240,0.4);
            border-right: 1px solid rgba(255,240,240,0.4);
            border-left: 1px solid rgba(255,240,240,0.4);
            box-shadow:
                inset 0 3px 2px rgba(255,255,255,.22),
                inset 0 20px 10px rgba(255,255,255,.12),
                0 0 4px 1px rgba(0,0,0,.1),
                0 3px 2px rgba(0,0,0,.2);

            /*border: 1px solid #000000;*/
        }
        #floatingNewNav
        {
            background-color: #aaaac6;
            margin-top: 0px;

            border-radius: 0px 0px 6px 6px;
            -moz-border-radius: 0px 0px 6px 6px;
            -webkit-border-radius: 0px 0px 6px 6px;
        }
        .NavSelected
        {
            color:black;
            background-color: #aaaac6;
            border-bottom: 0px #aaaac6 solid;

            border-radius: 6px 6px 0px 0px;
            -moz-border-radius: 6px 6px 0px 0px;
            -webkit-border-radius: 6px 6px 0px 0px;
        }

.divOpener类是<a> Shop by category</a>和其他链接 #floatingNewNav

这是实例。 https://www.newyorkpowertools.com/Template/headerTemplate.html

你会在那个例子中看到它适用于chrome，即，safari但是在 firefox 它不起作用。由于某种原因，firefox不会返回toElement对象中的对象event ..

我的问题

有没有办法可以创建一个带有两个元素的事件mouseEnter和mouseLeave并假装它只有一个元素所以我不需要

if($(event.toElement).attr("id") != "floatingNewNav")

感谢您的帮助，抱歉这个令人困惑的问题，

Answer 1

要创建一个显示在悬停上的下拉菜单，就像示例中的那个，我会使用CSS。见下面的例子：

HTML

<ul id="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
</ul>

CSS

#menu li ul {
    display: none;
}
#menu li:hover ul {
    display: block;
}

Answer 2

您可以执行此操作http://jsfiddle.net/aheLv/1/

$(".divOpener, #floatingNewNav").mouseenter(function () {
    if (!$(this).is('#floatingNewNav')) {
        LastThis = $(this);
    }
    $("#" + LastThis.attr("id") + "_Nav").css("display", "block");
    LastThis.addClass('NavSelected');

    var DivPosition = LastThis.parent().position();
    var Position = LastThis.position();

    var curTop = DivPosition.top;
    var curLeft = Position.left;
    var curWidth = LastThis.width();
    var curHeight = LastThis.parent().height();
    var DivWidth = LastThis.parent().width();

    var WidthOfNav = 400;

    var OffSetLeft = (curLeft + (curWidth / 2) - (WidthOfNav / 2) + WidthOfNav) - (DivPosition.left + DivWidth);
    var OffSetLeft = (OffSetLeft > 0 ? OffSetLeft : 0);

    $("#floatingNewNav").css("position", "absolute");
    $("#floatingNewNav").css("height", "100px");
    $("#floatingNewNav").css("top", (curTop + curHeight) + "px");
    $("#floatingNewNav").css("left", ((curLeft + (curWidth / 2)) - (WidthOfNav / 2)) - OffSetLeft + "px");
    $("#floatingNewNav").css("width", WidthOfNav + "px");

    $("#floatingNewNav").show(0);
});

你可以做很多事情来重构这段代码。实际上，我现在正在把它们拿出来，还有一些额外的东西，我会尽快更新

更新：

这是最终代码

var LastThis = null;
var openers = $(".divOpener, #floatingNewNav");

openers.mouseleave(function (event) {
    $("#floatingNewNav").hide();
    LastThis.removeClass("NavSelected");
    $("#" + LastThis.attr("id") + "_Nav").hide();
});

openers.mouseenter(function () {
    if (!$(this).is('#floatingNewNav')) {
        LastThis = $(this);
    }
    $("#" + LastThis.attr("id") + "_Nav").show();
    LastThis.addClass('NavSelected');

    var DivPosition = LastThis.parent().position();
    var Position = LastThis.position();

    var curTop = DivPosition.top;
    var curLeft = Position.left;
    var curWidth = LastThis.width();
    var curHeight = LastThis.parent().height();
    var DivWidth = LastThis.parent().width();

    var WidthOfNav = 400;

    var OffSetLeft = (curLeft + (curWidth / 2) - (WidthOfNav / 2) + WidthOfNav) - (DivPosition.left + DivWidth);
    var OffSetLeft = (OffSetLeft > 0 ? OffSetLeft : 0);

    $("#floatingNewNav").css({
        'position': 'absolute',
        'height': '100px',
        'top': (curTop + curHeight) + 'px',
        'left': ((curLeft + (curWidth / 2)) - (WidthOfNav / 2)) - OffSetLeft + 'px',
        'width': WidthOfNav + 'px'
    }).show();
});

http://jsfiddle.net/aheLv/2/

作为建议，只有以正确的方式构建html，才能在css中完成这些菜单。请参阅Kevin对结构的回答

Answer 3

只是抛出一个不同的概念，你的图片尖叫“jQuery标签”:-)，所以我使用了简单的标签，并为每个标签创建了一个jQuery触发事件。

FIDDLE

JS

$('.charts').tabs();

$('#firstone').mouseover(function(){
       $(this).trigger('click');
});
$('#secondone').mouseover(function(){
       $(this).trigger('click');
});
$('#thirdone').mouseover(function(){
       $(this).trigger('click');
});

不优雅，但我会更多地玩它，看看它是否可以“优雅”。

Answer 4

好像你过分复杂了......

如何跟踪鼠标的方向，如果它朝下，请不要隐藏下面的菜单项。

检查这个小提琴.. http://jsfiddle.net/ReVLN/2/

检查它在Mozilla和chrome / etc中的工作情况。

 var mY = 0;
$('div.menuItems').mousemove(function(e){
// moving upward
if (e.pageY < mY) {
    flag = "upward";
} else {
    flag = "downward";
}
// set new mY after doing test above
mY = e.pageY;
});

谢谢， jf_it

如何知道mouseLeave在两个元素上

我的问题

4 个答案: