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

当您使用光标输入列表时，需要一个包裹元素保持悬停状态。然后在其上放置一个悬停和一个离开事件监听器。

检查此示例：

＆＃13;

// Language DropDown on the top of the menu

$('.languageDropdown').hide();


$(".language").mouseover(function(){
	$(".languageDropdown").slideDown(400);
}).mouseleave(function(){
  $(".languageDropdown").slideUp(400);
});

＆＃13;

.languageDropdown{
  display:none;
}
ul{
  list-style:none;
  margin:0;
  padding:0;
}

＆＃13;

<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>

＆＃13;

如何使用带有jQuery的mouseenter（）获得类似的效果

2 个答案: