將鼠標懸停在另一個菜單上時關閉打開的子菜單

我有一個菜單，其中包含子菜單。當您將鼠標懸停在主菜單上時，子菜單將打開。當你點擊子菜單時，子菜單保持打開狀態，因爲它被賦予了'on'類。我想要的是，如果用戶將鼠標懸停在另一個主菜單部分的下一個子菜單上，並打開它們正在懸停的子菜單。將鼠標懸停在另一個菜單上時關閉打開的子菜單

<div class="sideMenu2"> 
    <ul> 
     <li><a href>retail</a> 
      <ul class="subsideMenu2"> 
       <li><a href="/portfolio/8/0">the elements</a></li> 
       <li><a href="/portfolio/9/0">bullring</a></li> 
       <li><a href="/portfolio/10/0">braehead</a></li> 
      </ul> 
     </li> 
     <li ><a href class="on">sports &amp; leisure</a> 
       <ul class="subsideMenu2"> 
         <li class= "on"><a href="/portfolio/19/0">the rose bowl</a></li> 
          <li><a href="/portfolio/48/0">alton towers pool</a></li> 
       </ul> 
     </li></ul>

CSS：

.sideMenu ul li.on a 
{ 
    height:2em; 
    padding-top: 2px; 
    background:url(../images/point.png) no-repeat; 
    font-weight:bold; 
} 

.sideMenu ul 
{  
    padding: 15px 0px 0px 0px; 
    list-style-type:none; 
    font-size:1em; 
    width:20em; 
    color:#fff; 
    margin-left:-10px; 
} 

.sideMenu ul a{ 
    padding: 2px 20px 0px 0px; 
    color:#fff; 
    text-decoration:none; 
    float:left; 
    width:19.2em; 
} 

.sideMenu li a 
{ 
    height:2em; 
    padding-top: 1px; 
    padding-left:15px; 
} 

.sideMenu li a:hover{ 
    background:url(../images/point.png) no-repeat; 
    cursor:pointer; 
    padding-left:-15px; 
} 

.sideMenu h4{ 
    display:none; 
} 

.sideMenu2 ul li.on a 
{ 
    height:2em; 
    padding-top: 2px; 
/** font-weight:bold; **/ 
} 

a.on 
{  
    background:url(../images/point.png) no-repeat; 
} 

.sideMenu2 ul 
{  
    padding: 15px 0px 0px 0px; 
    list-style-type:none; 
    font-size:1.1em; 

    color:#fff; 
    margin-left:-10px; 
} 

.sideMenu2 ul a{ 
    padding: 2px 20px 0px 0px; 
    color:#fff; 
    text-decoration:none; 
    float:left; 
    width:16.6em; 
} 

.sideMenu2 li a 
{ 
    height:2em; 
    padding-top: 1px; 
    padding-left:15px; 
} 

.sideMenu2 li a:hover{ 
    background:url(../images/point.png) no-repeat; 
    cursor:pointer; 
    padding-left:-15px; 

} 

.sideMenu2 ul ul 
{  
    display:none; 
} 
.sideMenu2 li:hover .subsideMenu2 { 
    display: block; 
} 

.sideMenu2 li .subsideMenu2 { 
    padding: 15px 0px 0px 20px; 
    list-style-type:none; 
    font-size:0.8em; 
    width:20em; 
    color:#fff; 
    margin-left:-10px; 
} 

.sideMenu2 li .subsideMenu2 li.on a 
{ 
    height:2em; 
    padding-top: 2px; 
    background:url(../images/point.png) no-repeat; 
/** font-weight:bold;**/  
    display:block; 
}

http://jsfiddle.net/uzi002/LSZBg/9/

來源

2012-02-28 Beginner

你是如何達到效果？通過CSS或JQuery的？向我們提供您所說的懸停效果的代碼，以便我們能夠更好地爲您提供一個可以提供幫助的答案，以及使用各種CSS和/或Jquery方法或兩者結合的方法來實現翻轉/懸停效果的幾種方法。 – chris 2012-02-28 10:28:59

考慮在提問時使用jsfiddle.net。它確實幫助人們快速創建工作解決方案。 – IsisCode 2012-02-28 10:29:05

對jsfiddle中的內容進行編碼，它會給我們一些東西來處理。 – Alex 2012-02-28 10:29:45

你需要確保你的菜單項目有一個類。除了使用.sideMenu ul li的，只是使用li.main_menu_item或東西：

$(function() { 
    $('li.main_menu_item').hover(function() { 
     // Hide all open sub-menus 
     $('li.main_menu_item').removeClass('on'); 

     // Show only this menu item's sub-menu 
     $(this).addClass('on'); 
    }); 
});

來源

2012-02-28 12:12:33 hohner

您可以用在所有具有「開」類，並且使用jQuery和你刪除的項目循環的功能懸停事件綁定可以使用「this」對象設置當前懸停項目以將其項目設置爲「on」，如果您發佈了用於執行此菜單的JavaScript，我可以幫助您做到這一點，或者您可以將代碼示例放在提琴手

來源

2012-02-28 10:30:39

我使用了css，並且如果用戶關閉了懸停，這意味着on class需要重新綁定到從哪個ti上取下來？ – Beginner 2012-02-28 10:39:38

對不起，我不知道你問題的含義 – 2012-02-28 18:24:45

將鼠標懸停在另一個菜單上時關閉打開的子菜單

回答

相關問題