Comment puis-je exiger qu'une action se produise sur deux éléments avant qu'un événement se produise dans JQuery?

Question

J'ai l'impression qu'il me manque quelque chose de simple mais j'essaye essentiellement de faire tomber une partie du contenu quand le titre est survolé. Ensuite, quand ni le titre ni le contenu sélectionné ne sont touchés par le curseur de la souris, je voudrais que le contenu glisse vers le haut. J'ai essayé d'utiliser .add ou en utilisant plusieurs sélecteurs et il semble ne pas fonctionner. J'ai besoin que le contenu reste assez longtemps pour que quelqu'un puisse sélectionner un lien, mais chaque fois que vous naviguez à partir du titre, le contenu disparaît.

jQuery

$(document).ready(function(){ 
    $("#cat1").hide() 
    $("#title1").on("mouseenter",function(){ 
    $("#cat1").slideDown(); 
    }); 
    $("#cat1").add("#title1").on("mouseleave",function(){ 
    $("#cat1").slideUp(); 
    }); 
}); 

HTML

<h4 id="title1">Getting Started</h4> 
<div id="cat1"> 
    <ul> 
    <li>Line</li> 
    <li>Line</li> 
    <li>Line</li> 
    <li>Line</li> 
    </ul> 
</div> 

Answer 1

Vous devez vous débarrasser de .add("#title1") et je pense que vous obtenez ce que vous voulez.

$(document).ready(function(){ 
$("#cat1").hide() 
$("#title1").on("mouseenter",function(){ 
$("#cat1").slideDown(); 
}); 
$("#cat1").on("mouseleave",function(){ 
$("#cat1").slideUp(); 
}); 
}); 
</script> 
<h4 id="title1">Getting Started</h4> 
<div id="cat1"> 
<ul> 
    <li>Line</li> 
    <li>Line</li> 
    <li>Line</li> 
    <li>Line</li> 
</ul> 
</div> 

Voir ici: https://jsfiddle.net/jonmrich/1d6d7k9x/1/

Answer 2

solution simple serait de résumer les pièces connexes.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
    $("#cat1").hide(); 
 

 
    $(".menuItem").on("mouseenter", function() { 
 
     $("#cat1").slideDown(); 
 
    }); 
 

 
    $(".menuItem").on("mouseleave", function() { 
 
     $("#cat1").slideUp(); 
 
    }); 
 
    }); 
 

 
</script> 
 
<div class="menuItem"> 
 
    <h4 id="title1">Getting Started</h4> 
 
    <div id="cat1"> 
 
    <ul> 
 
     <li>Line</li> 
 
     <li>Line</li> 
 
     <li>Line</li> 
 
     <li>Line</li> 
 
    </ul> 
 
    </div> 
 
</div>

En ciblant l'élément enroulé vous assurer que l'événement mouseleave ne se déclenche pas à la sortie du titre pour accéder au contenu. Seulement quand il quitte la zone partagée.

Answer 3

Deux solutions possibles me viennent à l'esprit, même si je n'ai pas essayé l'une ou l'autre. Commencez par placer une enveloppe autour de votre h et de votre div, puis joignez vos événements à l'encapsuleur.

<div id="menu1"> <-- Events go here 
<h4 id="title1">Getting Started</h4> 
<div id="cat1"> 
<ul> 
    <li>Line</li> 
    <li>Line</li> 
    <li>Line</li> 
    <li>Line</li> 
</ul> 
</div> 
</div> 

L'autre option serait de style de votre chat div telle sorte qu'il recouvre la tête, et joindre seulement le congé de la souris à la div, pas la tête.