Solution au déclenchement répété du survol et du mouseout dans le menu déroulant de jQuery

La solution trouvée en ligne est de changer l'événement en mouseenter et mouseleave, mais cela ne fonctionne toujours pas après l'avoir modifié. Lorsque la souris glisse sur la zone de déclenchement, le menu déroulant apparaîtra et se cachera à plusieurs reprises.

//purProduction为“购买产品”的id，showPurchase为下拉菜单的id
$("#purProduction").mouseenter(function() {
					$("#showPurchase").slideDown();					
				})
				$("#purProduction").mouseleave(function() {
					$("#showPurchase").slideUp();
				})
				$("#showPurchase").mouseenter(function(){
					$("#showPurchase").slideDown();
				})
				$("#showPurchase").mouseleave(function(){
					$("#showPurchase").slideUp();
				}) 				

<a class="name" id="purProduction" style="padding:20px;position:relative;left:1px;top:10px;">购买产品</a>

<div class="showDiv" id="showPurchase" style="position:absolute;left:595px;top:50px;">
			     <!-- 向上的箭头  -->
				<div class="outTri"></div>
				<div class="inTri"></div>


					<a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">查询价格</a>
					<a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">等级购买</a>
					<a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">经销商查询</a>
					<a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">合作加盟</a>

			</div>

À propos du "pop-up répété" que vous avez mentionné
C'est en fait comme ça : déplacez le la souris sur purProduction, déclenchant l'apparition de la souris de purProduction à ce moment-là, lorsque la souris se déplace vers showPurchase, quel événement sera déclenché ? Tout d'abord, la souris quitte purProduction, déclenchant son mouseleave, puis la souris entre dans showPurchase, déclenchant mouseenter... Ce n'est pas grave, il semble qu'il suffit de le fermer une fois et de le réafficher. Cependant, l'événement sera également déclenché pendant le processus. Processus slideDown. Lorsque showPurchase est dans slideDown Lorsque vous passez près de la souris à plusieurs reprises pendant le processus, l'événement de la souris sera déclenché à plusieurs reprises...

La solution est simple. Le meilleur moyen est d’abandonner ce mécanisme et d’utiliser le survol. Bien sûr, si vous êtes très réticent à conserver votre code, alors vous devriez envisager d'utiliser Intervalle pour vérifier régulièrement... par exemple (ne me blâmez pas pour une écriture moche, en fait, cela devrait être personnalisé avec CSS)

//purProduction为“购买产品”的id，showPurchase为下拉菜单的id$("#showPurchase").slideUp();var show=false, showed=false;setInterval(function () {
  if (show && !showed) {
    $("#showPurchase").slideDown();
    showed=true;
  } else if (!show && showed) {
    $("#showPurchase").slideUp();
    showed=false;
  }}, 100);$("#purProduction").mouseenter(function() {
  show=true;})$("#purProduction").mouseleave(function() {
  show=false;})$("#showPurchase").mouseenter(function() {
  show=true;})$("#showPurchase").mouseleave(function(){
  show=false;})

Oui Parce que votre file d'attente d'événements est pleine de survols et de sorties de souris, vous devez soit utiliser :hover pour contrôler le style, soit utiliser la méthode stop comme mentionné ci-dessus pour effacer la file d'attente d'événements précédente.

Pourquoi a-t-on l'impression que Zhihu s'est transformé en StackDébordement...

En effet, après que l'événement de souris soit déclenché plusieurs fois, la file d'attente d'animation du nœud accumule plusieurs fois. Pour slideDown et slideUp, remplacez-le par $('#showPurchase').stop(true).slideDown() et ça devrait aller.

Deux méthodes
La première est la plus simple. Placez votre menu déroulant et votre bouton dans un conteneur, et liez simplement les deux événements que vous avez mentionnés au conteneur. En fait, vous pouvez utiliser hover(. ). Si vous n'avez pas besoin d'ajouter d'effet, c'est plus simple d'utiliser : survoler.
Le deuxième type est un peu gênant à implémenter si la structure reste inchangée. Vous devez utiliser setTimeout. Généralement, l'info-bulle est implémentée comme ceci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!