使用此＆gt;查找悬停功能

Question

我正在尝试这样的悬停;

HTML; <!-- Item --> <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（''）代码时，它无效。我该如何解决？

Answer 1

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

<强>更新

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

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

Answer 2

这是一个有效的解决方案。希望它有所帮助！

＆＃13;

＆＃13;

$(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"});
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;