0
我試圖在懸停時創建一個下拉菜單，如下所示。如何知道兩個元素上的mouseLeave
在網站的標題下。
林與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
您將在這個例子看到，它在鉻，IE和Safari但在Firefox的它不起作用。東陽由於某種原因，火狐不要在event對象返回對象toElement ..
我的問題
有沒有一種方法，我可以有兩個元素，假創建一個事件MouseEnter和鼠標離開，這是隻有一個元素等等我不需要
if($(event.toElement).attr("id") != "floatingNewNav")
感謝您的幫助，而且很抱歉的混亂問題，。
它似乎是你的if語句是不必要的，因爲你只有3菜單項，並在每個如果你正在做同樣的事情。編輯：對不起，沒有看到floatingdiv，只是檢查不floatingdiv – Huangism
這是需要的，因爲如果我一旦我離開.DivOpener關閉即使我去浮動導航。 –
是啊看到我的編輯，只是檢查id'不浮動導航'，而不是檢查所有3個ID。或者你可以使用https://api.jquery.com/not/，或者你可以檢查$（this）是否具有divOpener，有很多方法可以在一次檢查中代替3 – Huangism