これでのホバー機能> find

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

しかし、私は.find（ ''）$の後にコードを追加するとき、それは働いていない（ 'ドロップダウン・トグル'）。どうすれば修正できますか？

Answer 1

あなたのli i a DOM要素にはul.dropdown-menu要素がありません。 $(this) 2行目は、li a i要素で検索を開始します。これは空です。

UPDATE：

あなただけul.dropdown-menuを追加したが、それは外でまだli a iです。ここで働いソリューションです

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

Answer 2

：それはli要素であり、そうするスクリプトの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>