jQuery懸停並檢查鏈接是否被點擊

我想檢查鏈接「meist」是否被點擊，並且如果點擊了鏈接而不是將子菜單改爲submeist。因此，如果您將鼠標懸停在外，它將自動返回到子菜單jQuery懸停並檢查鏈接是否被點擊
當我想要單擊子菜單上的某些內容時，子菜單將消失，我無法找出它的修復方法。

HTML

<ul id="menüü"> 
    <li id="meist"> 
     <p><a href="meist.html">Meist</a></p> 
    </li> 
    <li id="seadmed"> 
     <p><a href="seadmed.html">Seadmed</a></p> 
    </li> 
</ul> 

<div id="submenu"> 
    <ul id="submeist"> 
     <li class="asi1"> 
      Asi 1 
     </li> 
     <li class="asi2"> 
      Asi 2 
     </li> 
     <li class="asi3"> 
      Asi 3 
     </li> 
    </ul> 

    <ul id="subseadmed"> 
     <li class="item1"> 
      Item 1 
     </li> 
     <li class="item2"> 
      Item 2 
     </li> 
     <li class="item3"> 
      Item 3 
     </li> 
    </ul> 
</div>

CSS

#meist { 
    display: inline; 
    float:left; 
    width:180px; 
    height:50px; 
    color:#191919; 
    text-align:center; 
    overflow:hidden; 
    background:#990000; 
    -moz-border-radius-top-left: 50px; 
    border-top-left-radius: 50px; 
} 
#meist:hover { 
    text-decoration: underline; 
    color: white; 
    font-size: 17.5px; 
    line-height: 15px; 
} 
#seadmed { 
    display: inline; 
    float:left; 
    width:180px; 
    height:50px; 
    color:#191919; 
    text-align:center; 
    overflow:hidden; 
    background:#990000; 
} 
#seadmed:hover { 
    text-decoration: underline; 
    color: white; 
    font-size: 17.5px; 
    line-height: 15px; 
} 
#submenu { 
    color:white; 
    height:25px; 
    width:900px; 
    background:#630000; 
    margin-top:50px; 
} 
#submeist { 
    display:none; 
    font-size:12px; 
} 
#submeist .asi1 { 
    margin-left:70px; 
    height:25px; 
    width:75px; 
} 
#submeist .asi2 { 
    margin-left:25px; 
} 
#submeist .asi3 { 
    margin-left:25px; 
} 
#subseadmed { 
    display:none; 
    font-size:12px; 
} 
#subseadmed .item1 { 
    margin-left:70px; 
    height:25px; 
    width:75px; 
} 
#subseadmed .item2 { 
    margin-left:25px; 
} 
#subseadmed .item3 { 
    margin-left:25px; 
}

$(document).ready(function() { 
    $("#meist").mouseleave(function() { 
     $("#submeist").hide(); 
     return false; 
    }); 

    $("#meist").mouseenter(function() { 
     $("#submeist").show(); 
     return false; 
    }); 

    $("#seadmed").mouseleave(function() { 
     $("#subseadmed").hide(); 
     return false; 
    }); 

    $("#seadmed").mouseenter(function() { 
     $("#subseadmed").show(); 
     return false; 
    }); 
});

來源

2013-06-03 VonHornmeister

只是在這裏提示：我不會推薦在你的ID和類中使用特殊字符（'ü'，'é'，'è'等），有些瀏覽器可能會遇到這些問題。 –

好的......我會在它解決之後不久改變它們。謝謝你的提示 – VonHornmeister

用OP的代碼做了一個小提琴：http://jsfiddle.net/PhwfT/ – qJake

我想你可以通過添加

0123耽誤隱藏闕

和

$("#seadmed").mouseleave(function() { 
    $("#subseadmed").delay(1000).hide('fast'); 
    return false;

小心延遲闕。僅在必要時添加。這可能是臨時解決方案之一，這不是唯一的解決方案。

根據需求增加隱藏子菜單的時間。

來源

2013-06-03 17:48:02 Nirus

jQuery懸停並檢查鏈接是否被點擊

回答

相關問題