如何在jQuery中使用mouseenter（）获得相似的效果

Question

我创建了下拉菜单，当我单击主项目时，它会打开一个下拉菜单

这是Fiddle示例： 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(){ $(".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>