懸停時顯示子菜單並將其保留在那裏

當我將鼠標懸停在菜單項上時，背景會更改顏色並顯示子菜單。當我將鼠標移到子菜單上時，如何讓子菜單繼續顯示並保留更改背景？懸停時顯示子菜單並將其保留在那裏

我的HTML

<div class="shoplink"><a>Online Shop</a></div> 
<div id="shop-menu"> 
      <ul> 
       <li>Food</li> 
       <li>Home & Living</li> 
       <li>Personal Assistance</li> 
       <li>Kids</li> 
       <li>Musical Instruments</li> 
       <li>Beauty & Wellbeing</li> 
       <li>Outdoor</li> 
       <li>Office & Stationery</li> 
       <li>Cards & Gift Paper</li> 
       <li><b>Browse All</b></li> 
      </ul> 
     </div> <!-- #shop-menu -->

我的JS到目前爲止....

$('#shop-menu').hide(); 
$('.shoplink').live('hover', function(e) { 
    $(this).toggleClass('activeitem'); 
    $('#shop-menu').toggle(); 
});

所以我可以顯示該店菜單，當我將鼠標懸停在.sublink。當我將鼠標從.shoplink移到＃shop-menu選擇一個項目時，我只是將它保留在那裏。

非常感謝

來源

2013-02-28 Becs Carter

我想你toogles的顯示和隱藏菜單...嘗試：

$('#shop-menu').hide(); 
$('.shoplink').live('hover', function(e) { 
    $(this).addClass('activeitem'); 
    $('#shop-menu').show(); 
});

爲了改回它，你可以檢查@Madhu Rox答案做這樣的：

$('#shop-menu').live('mouseleave', function(e) { 
    $('.shoplink').removeClass('activeitem'); 
    $('#shop-menu').hide(); 
});

你也unbind懸停事件像$(this).unbind('hover');，但隨後，如果在頁面其他操作關閉它，你會想重新打開，你必須重新綁定懸停事件。

來源

2013-02-28 02:30:02 RMalke

如果鼠標移出新顯示的列表，當鼠標離開＃shop-menu div時，如何獲得＃shop-menu和.shoplink以更改回原始形式？ – 2013-02-28 03:16:05

儘量把下拉菜單項中

<div class="shoplink"> 
    <a>Online Shop</a> 
    <div id="shop-menu"> 
      <ul> 
       <li>Food</li> 
       <li>Home & Living</li> 
       <li>Personal Assistance</li> 
       <li>Kids</li> 
       <li>Musical Instruments</li> 
       <li>Beauty & Wellbeing</li> 
       <li>Outdoor</li> 
       <li>Office & Stationery</li> 
       <li>Cards & Gift Paper</li> 
       <li><b>Browse All</b></li> 
      </ul> 
    </div> <!-- #shop-menu --> 
</div>

演示：http://jsfiddle.net/cU629/

來源

2013-02-28 02:29:59 phnkha

更改HTML來包裝整個子菜單，並與<div class="shoplink">

菜單項您的代碼會像

<div class="shoplink"> 
    menu item 
    sub menu 
</div>

或以前的回答，請更新你的java腳本

$('#shop-menu').hide(); 
$('.shoplink').live('hover', function(e) { 
    $(this).addClass('activeitem'); 
    $('#shop-menu').show(); 
});

並在此之後添加以下代碼

$('#shop-menu').live('mouseleave', function(e) { 
    $('.shoplink').removeClass('activeitem'); 
    $('#shop-menu').hide(); 
});

來源

2013-02-28 03:28:25 madhushankarox

懸停時顯示子菜單並將其保留在那裏

回答

相關問題