Div下拉菜單問題

我決定對菜單編碼採用更復雜的方法。似乎我喜歡折磨自己。Div下拉菜單問題

總之，我創建了一個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; }

誰能幫助我實現我的製作目標下拉菜單停留時可見鼠標還在嗎？

來源

2012-05-25 Albert

菜單應該是一個無序列表，而不是divs。 – epascarello

你可以重建你的代碼位：

$('.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'); 
});

DEMO：http://jsfiddle.net/vnRV4/

好問題的意見中提出@epascarello。你應該更好地使用嵌套列表，而不是div塊。此外，用CSS樣式.sub-menu-items { display: none; }代替$('.sub-menu-items').hide()將是一件好事，以防止頁面加載時出現閃爍。

來源

2012-05-25 13:27:07 VisioN

謝謝，這個作品完美。我做了所有div（愚蠢），然後當我把它列入清單，沒有任何工作。所以我現在回到divs。在這個問題上非常緊張，所以我會在完成後再處理它。你知道，改進它！ :) – Albert

你可以使用setTimeout和一個標誌檢查。

的功能外：

var submenuhovered=false;

上隱藏功能：

setTimeout(function(){ 
    if(submenuhovered==false){ 
     $(this).siblings(".sub-menu-items").hide(); 
    } 
},200);

上子菜單鼠標移開功能的子菜單的鼠標懸停功能

submenuhovered = true;

submenuhovered = false;

或者您可以使用菜單元素的.data（）集合而不是全局變量。

$("menu").data("submenuhovered","true");

來源

2012-05-25 13:34:51

Div下拉菜單問題

回答

相關問題