jQuery의 드롭다운 메뉴에서 마우스오버 및 마우스아웃이 반복적으로 발생하는 문제에 대한 솔루션

온라인에서 찾은 해결책은 mouseenter 및 mouseleave 이벤트를 변경하는 것인데, 변경한 후에도 여전히 작동하지 않습니다. 트리거 영역 위로 마우스를 슬라이드하면 드롭다운 메뉴가 나타났다가 숨겨지기를 반복합니다.

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

당신이 언급한 "반복 팝업"에 대해
실제로는 다음과 같습니다. purProduction으로 마우스를 이동하면 이때 마우스가 showPurchase로 이동할 때 purProduction의 마우스 입력이 팝업됩니다. 또, 모직물은 어떤 이벤트가 발동되나요? 먼저 마우스가 purProduction을 떠나 mouseleave를 트리거한 다음 마우스가 showPurchase로 들어가 mouseenter를 트리거합니다... 괜찮습니다. 한 번 닫았다가 다시 팝업되는 것처럼 보입니다. 그러나 이벤트는 이벤트 중에도 트리거됩니다. SlideDown 프로세스. showPurchase가 SlideDown에 있는 경우 프로세스 중에 마우스 근처를 반복적으로 통과하면 마우스 이벤트가 반복적으로 발생합니다...

해결 방법은 간단합니다. 가장 좋은 방법은 이 메커니즘을 포기하고 hover를 사용하는 것입니다. 물론 코드를 유지하기를 꺼린다면 Interval을 사용하여 정기적으로 확인하는 것을 고려해야 합니다... 이렇게요(글이 못생겼다고 비난하지 마세요. 사실 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;})

이벤트 큐 때문에 그들은 모두 mouseover 및 mouseout입니다. 스타일을 제어하려면 :hover를 사용하거나 위에서 언급한 대로 이전 이벤트 큐를 지우려면 stop 메소드를 사용하십시오.

Zhihu가 StackOverflow로 변한 것 같은 느낌이 드는 이유는...

마우스 이벤트가 여러 번 발생한 후 노드의 애니메이션 대기열에 여러 개의 SlideDown 및 SlideUp이 누적되기 때문입니다. #showPurchase' ).stop(true).slideDown() 이 트릭을 수행해야 합니다.

두 가지 방법
첫 번째 방법이 가장 간단합니다. 드롭다운 메뉴와 버튼을 컨테이너에 넣으려면 실제로 hover()를 사용할 수 있습니다. 효과를 추가할 필요는 없지만 :hover를 사용하는 것이 더 쉽습니다.
두 번째 유형은 구조가 변경되지 않은 상태에서 구현하기가 약간 번거롭습니다. 일반적으로 툴팁은 다음과 같이 구현됩니다.

위 내용은 jQuery의 드롭다운 메뉴에서 마우스오버 및 마우스아웃이 반복적으로 발생하는 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!