使用的mouseenter（）使用jQuery

Question

如何獲得類似的效果我創建下拉菜單，當我的主項點擊，它會打開一個下拉菜單

這裏是小提琴例如：http://jsfiddle.net/tjf22z6p/177/

我與mouseenter()和mouseleave()或其他任何有效的方法都需要同樣的效果。謝謝

Answer 1

你需要考慮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> 

Answer 2

當您用光標輸入列表時，您需要一個包裹元素來保持懸停狀態。然後放置一個懸停和離開事件監聽器。

檢查這個例子：

// Language DropDown on the top of the menu 
 

 
$('.languageDropdown').hide(); 
 

 

 
$(".language").mouseover(function(){ 
 
\t $(".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>