[英]How to get a similar effect using mouseenter() with jQuery
我創建了下拉菜單,當我單擊主項目時,它會打開一個下拉菜單
這是Fiddle示例: http : //jsfiddle.net/tjf22z6p/177/
我需要使用mouseenter()
和mouseleave()
或任何其他有效的方法來達到相同的效果。 謝謝
您需要考慮mouseenter,mouseleave。 但是可以使其余代碼相同:
$('.language').on('mouseenter mouseleave', function(){
$('.languageDropdown').slideToggle(400);
});
或者您也可以在不使用jQuery / javascript的情況下實現相同的功能,而只需對標記稍作更改即可使用CSS: http : //jsfiddle.net/k4n6rnmr/
CSS:
.languageDropdown{
display:none;
}
.language:hover .languageDropdown{
display: block;
}
ul{
list-style:none;
}
加價:
<div class="language">
<a href="#">
ENG
</a>
<i class="fa fa-caret-down" aria-hidden="true"></i>
<ul class="languageDropdown">
<li>
<a href="#">
ENGLISH
</a>
</li>
<li>
<a href="#">
SPANISH
</a>
</li>
<li>
<a href="#">
ARABIC
</a>
</li>
<li>
<a href="#">
TELUGU
</a>
</li>
</ul>
在使用光標輸入列表時,您需要一個包裝元素以使其懸停。 然后在其上放置一個懸停和一個離開事件偵聽器。
檢查以下示例:
// Language DropDown on the top of the menu $('.languageDropdown').hide(); $(".language").mouseover(function(){ $(".languageDropdown").slideDown(400); }).mouseleave(function(){ $(".languageDropdown").slideUp(400); });
.languageDropdown{ display:none; } ul{ list-style:none; margin:0; padding:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="language"> <a href="#"> ENG </a> <i class="fa fa-caret-down" aria-hidden="true"></i> <ul class="languageDropdown"> <li> <a href="#"> ENGLISH </a> </li> <li> <a href="#"> SPANISH </a> </li> <li> <a href="#"> ARABIC </a> </li> <li> <a href="#"> TELUGU </a> </li> </ul> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.