悬停功能与 this>find答案

【问题标题】：Hover function with this>find悬停功能与 this>find
【发布时间】：2016-12-03 22:59:57
【问题描述】：

我正在尝试这样的悬停；

HTML;  <li class="dropdown-toggle" data-toggle="dropdown"> <a href="#home" class="item"> Home <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu to-center mega-menu">...</ul> </li>

jQuery;

$(".dropdown-toggle").find('> a i').hover(function(){
    $(this).find('> ul.dropdown-menu').slideUp({duration: 700, easing: "easeInOutQuart"});
        $(this).find('> ul.dropdown-menu').slideDown({duration: 700, easing: "easeInOutQuart"});        
    }, function () {
    $(this).find('> ul.dropdown-menu').slideUp({duration: 700, easing: "easeInOutQuart"});
});

但是当我在 $('.dropdown-toggle') 之后添加 .find('') 代码时它不起作用。我该如何解决？

【问题讨论】：

标签： jquery menu hover find this

【解决方案1】：

您的li i a DOM 元素中没有ul.dropdown-menu 元素。第二行中的$(this) 开始在li a i 元素中搜索，该元素为空。

更新：

您刚刚添加了ul.dropdown-menu，但它仍在li a i 之外。它位于li 元素中，因此将脚本的第二行更改为：

$(this).closest('li').find('> ul.dropdown-menu')

【讨论】：

"a" 标签后面有 ul.dropdown-menu 项，刚刚添加。谢谢。

【解决方案2】：

这是一个可行的解决方案。希望对您有所帮助！

$(document).ready(function(){

$(".dropdown-toggle").find('> a i').hover(function(){
 $("#panel").html($(this).closest("ul").find("> ul.dropdown-menu "));
 $("#panel").slideDown({duration: 700, easing: "easeInOutQuart"});

  }, function(){
   $("#panel").slideUp({duration: 700, easing: "easeInOutQuart"});
  });
});

#panel {
  margin: 20px;
  display: none;
  border: 1px solid green;
  width: 100px;
  height:30px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<ul>
<li class="dropdown-toggle" data-toggle="dropdown">
  <a href="#home" class="item">Home<i class="fa fa-angle-down"></i></a>
    <ul class="dropdown-menu to-center mega-menu">
      <li>someText</li>
    </ul>
</li>
</ul>
<div id="panel"></div>

【讨论】：