Lösung für das wiederholte Auslösen von Mouseover und Mouseout im Dropdown-Menü in jQuery

Die online gefundene Lösung besteht darin, das Ereignis in „mouseenter“ und „mouseleave“ zu ändern, aber es funktioniert nach der Änderung immer noch nicht. Wenn die Maus über den Auslösebereich gleitet, wird das Dropdown-Menü immer wieder eingeblendet und ausgeblendet.

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

Über das „wiederholte Popup“, das Sie erwähnt haben
Es ist tatsächlich so: Verschieben Sie das Klicken Sie mit der Maus auf purProduction, wodurch das Popup von purProduction mit der Maus ausgelöst wird. Wenn sich die Maus zu showPurchase bewegt, wird welches Ereignis ausgelöst? Zuerst verlässt die Maus purProduction, wodurch ihr Mouseleave ausgelöst wird, und dann betritt die Maus showPurchase, wodurch Mouseenter ausgelöst wird ... Das ist in Ordnung, es scheint, dass es nur einmal geschlossen und dann wieder angezeigt wird. Das Ereignis wird jedoch auch während des Vorgangs ausgelöst slideDown-Prozess. Wenn sich showPurchase im slideDown-Modus befindet, wird das Mausereignis wiederholt ausgelöst, wenn Sie sich während des Prozesses wiederholt der Maus nähern ...

Die Lösung ist einfach. Der beste Weg ist, diesen Mechanismus aufzugeben und Hover zu verwenden. Wenn Sie Ihren Code nur sehr ungern behalten möchten, sollten Sie in Betracht ziehen, regelmäßig Intervalle zu verwenden ... zum Beispiel (geben Sie mir nicht die Schuld für die hässliche Schrift, dies sollte tatsächlich mit CSS angepasst werden)

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

Ja Da Ihre Ereigniswarteschlange voll ist mit Mouseover und Mouseout, müssen Sie entweder :hover verwenden, um den Stil zu steuern, oder die Stop-Methode wie oben erwähnt verwenden, um die vorherige Ereigniswarteschlange zu löschen.

Warum fühlt es sich an, als hätte sich Zhihu in einen Stapel verwandelt?Überlauf...

Das liegt daran, dass sich die Animationswarteschlange des Knotens mehrfach ansammelt, nachdem das Mausereignis mehrmals ausgelöst wurde Ändern Sie es für slideDown und slideUp in $('#showPurchase').stop(true).slideDown() und es sollte in Ordnung sein.

Zwei Methoden
Die erste ist die einfachste. Platzieren Sie Ihr Dropdown-Menü und Ihre Schaltfläche in einem Container und binden Sie einfach die beiden Ereignisse, die Sie erwähnt haben, an den Container. ). Wenn Sie keinen Effekt hinzufügen müssen, ist die Verwendung von:hover einfacher.
Die zweite Methode ist etwas mühsam zu implementieren, wenn die Struktur unverändert bleibt. Sie müssen setTimeout verwenden. Im Allgemeinen wird der Tooltip so implementiert.

Das obige ist der detaillierte Inhalt vonLösung für das wiederholte Auslösen von Mouseover und Mouseout im Dropdown-Menü in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!