Solution to the repeated triggering of mouseover and mouseout in the drop-down menu in jQuery

The solution found online is to change the event to mouseenter and mouseleave, but it still doesn't work after changing it. When the mouse slides over the trigger area, the drop-down menu will pop up and hide repeatedly.

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

About what you said about "repeated pop-ups"
is actually like this: move the mouse to purProduction, Trigger the mouseenter of purProduction to pop up; when the mouse moves to showPurchase, what event will be triggered? First, the mouse leaves purProduction, triggering its mouseleave, and then the mouse enters showPurchase, triggering mouseenter... This is okay, it seems to just close it once and pop it up again. However, the event will also be triggered during the slideDown process. When showPurchase is in slideDown When passing near the mouse repeatedly during the process, the mouse event will be triggered repeatedly...

The solution is very simple. The best way is to abandon this mechanism and use hover. Of course, if you are reluctant to keep your code, then you should consider using Interval to check regularly... like this (don't blame me for ugly writing, in fact, this should be customized with 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;})

It's because of you The event queue is full of mouseover and mouseout. Either use :hover to control the style, or use the stop method to clear the previous event queue as mentioned above.

Why does it feel like Zhihu has become StackOverflow...

This is because after the mouse event is triggered multiple times, the node's animation queue accumulates multiple times. For slideDown and slideUp, change it to $('#showPurchase').stop(true).slideDown() and it should be fine.

Two methods
The first one is the simplest. Put your drop-down menu and button into a container. You only need to bind the two events you mentioned to the container. In fact, you can Use hover(). If you don’t have to add an effect, it’s easier to use:hover.
It is a little troublesome to implement the second structure without changing it. You need to use setTimeout. Generally, tooltip is implemented like this.

The above is the detailed content of Solution to the repeated triggering of mouseover and mouseout in the drop-down menu in jQuery. For more information, please follow other related articles on the PHP Chinese website!