[英]Div Dropdown Menu Issue
我決定采用一種更棘手的方法來編碼菜單。 好像我喜歡折磨自己。
無論如何,我創建了一個div菜單:
<div class="menu-bar">
<div class="menu-item"><span class="menu-text">HOME</span></div>
<div class="menu-item"><span class="menu-text">ABOUT US</span>
<div class="sub-menu-items">
<div class="sub-menu-item">History</div>
<div class="sub-menu-item">Mission, vision and values</div>
<div class="sub-menu-item">B-BBEE</div>
<div class="sub-menu-item">Team</div>
<div class="sub-menu-item">Professional Affiliations</div>
</div>
</div>
<div class="menu-item"><span class="menu-text">SECTORS</span></div>
<div class="menu-item"><span class="menu-text">SERVICES</span></div>
<div class="menu-item"><span class="menu-text">CSR</span></div>
<div class="menu-item"><span class="menu-text">PROJECTS</span></div>
<div class="menu-item"><span class="menu-text">SUSTAINABILITY</span></div>
<div class="menu-item"><span class="menu-text">CONTACT US</span></div>
</div>
我的問題來自子菜單.sub-menu-items
。 一旦鼠標移出“關於我們”區域並進入子菜單,我不知道如何使其保持打開狀態。
這是我當前擁有的JavaScript代碼:
$('.sub-menu-items').hide();
$('.menu-text').hover(function(e) {
// Show highlight
$(this).toggleClass('menu-text-hover');
$(this).parent().toggleClass('menu-item-hover');
if($(this).html().indexOf('ABOUT',0) !== -1)
$('.sub-menu-items').show('fast');
},function(e) {
// Hide highlight
$(this).toggleClass('menu-text-hover');
$(this).parent().toggleClass('menu-item-hover');
if($(this).html().indexOf('ABOUT',0) !== -1)
$('.sub-menu-items').hide('fast');
});
這是我的CSS:
.menu-bar { position:absolute; top:159px; height:54px; width:1024px; background-color:#fafafa; z-index:2; }
.menu-item { display:table-cell; vertical-align:middle; position:relative; left:79px; height:54px; text-align:center; width:105px; border-right:dotted thin #000; border-bottom:dotted thin #000; background-color:#fafafa; }
.menu-item-hover { border-bottom:none; }
.menu-text { display:table-cell; vertical-align:middle; height:52px; width:101px; position:relative; left:2px; top:1px; text-align:center; border-top-right-radius:0px; margin-left:2px; margin-top:2px; margin-right:2px; }
.menu-text-hover { border-top-right-radius:20px; background-color:#445921; color:#fff; cursor:pointer; }
.sub-menu-items { position:absolute; display:inline-block; top:55px; width:105px; background: rgba(255, 255, 255, 0.8); font-size:12px; z-index:100; }
.sub-menu-item { background:url(../images/devider-horizontal.png) no-repeat center top; display:block; height:40px; }
.sub-menu-item:last { background-image:none; display:block; height:40px; }
任何人都可以協助我實現我的目標,即當鼠標仍然位於下拉菜單上方時,使下拉菜單保持可見狀態嗎?
您可以重新構建代碼:
$('.sub-menu-items').hide();
$('.menu-item').hover(function(e) {
var el = $(this).children(".menu-text");
el.toggleClass('menu-text-hover');
$(this).toggleClass('menu-item-hover');
if (el.html().indexOf('ABOUT', 0) !== -1)
$(this).find('.sub-menu-items').show('fast');
}, function(e) {
var el = $(this).children(".menu-text");
el.toggleClass('menu-text-hover');
$(this).toggleClass('menu-item-hover');
if (el.html().indexOf('ABOUT', 0) !== -1)
$(this).find('.sub-menu-items').hide('fast');
});
演示: http : //jsfiddle.net/vnRV4/
好問題在評論中引發了@epascarello。 您最好使用嵌套列表而不是div塊。 而且,將$('.sub-menu-items').hide()
替換為CSS樣式.sub-menu-items { display: none; }
.sub-menu-items { display: none; }
,以防止頁面加載時閃爍。
您可以與此同時使用setTimeout和標志檢查。
功能外:
var submenuhovered=false;
隱藏功能:
setTimeout(function(){
if(submenuhovered==false){
$(this).siblings(".sub-menu-items").hide();
}
},200);
子菜單上的鼠標懸停功能
submenuhovered = true;
子菜單上的mouseout功能
submenuhovered = false;
或者您可以使用菜單元素的.data()集合代替全局變量。
$("menu").data("submenuhovered","true");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.