單擊＆mouseenter/mouseleave上的元素和其他元素

我在以下佈局中有3個主要div元素。單擊＆mouseenter/mouseleave上的元素和其他元素

<body> 
    <div id="topBox" class="otherBox"> 
    TEST TOP 
    </div> 

    <div id="middleBox" class="middleBox"> 
    SECTION 
    </div> 
    <div id="tab" class="tab"><span>New Comment</span></div> 

    <div id="bottomBox" class="otherBox"> 
    TEST BOTTOM 
    </div> 
</body>

.otherBox { 
    border: 2px solid #73AD21; 
    width: 100%; 
    height: 150px; 
} 

.middleBox { 
    border: 2px solid #73AD21; 
    width: 100%; 
    height: 25px; 
} 

.tab { 
    border-left: 2px solid #73AD21; 
    border-right: 2px solid #73AD21; 
    border-bottom: 2px solid #73AD21; 
    border-bottom-left-radius: 0.5em; 
    border-bottom-right-radius: 0.5em; 
    height: 15px; 
    width: 120px; 
    margin-bottom: 20px; 
}

$(document).ready(function() { 

    click = 0; 

    $("#tab, #middleBox").click(function() { 
    if (click === 0) { 
     click = 1; 
     $("#middleBox").animate({ 
     height: '400px' 
     }, 500); 
    } else { 
     click = 0; 
     $("#middleBox").animate({ 
     height: '30px' 
     }, 850); 
    }; 
    }); 

    if (click === 0) { 
    //Do wiggle 
    $("#tab, #middleBox").mouseenter(function() { 
     $("#middleBox").animate({ 
     height: "40px" 
     }, 800); 
    }); 
    $("#middleBox").mouseleave(function() { 
     $("#middleBox").animate({ 
     height: "30px" 
     }, 800); 
    }); 
    } 
});

中東div有一個小標籤，左下角。他們希望中間div能夠點擊自身或標籤。而mouseenter/mouseleave需要「擺動」動畫才能吸引用戶注意可擴展div元素。

當標籤鼠標懸停被激活，然後點擊激活時，行爲出錯。鼠標然後被放置在擴展的中間div內，但是任何鼠標移動都會折斷div。

難道有人指出我在正確的方向來避免這個問題？我是新來的這個東西，所以要溫柔！

我試過.off（「mouseenter mouseleave」）上的相關元素無濟於事。

理想情況下，用戶應該能夠鼠標輸入/離開選項卡或div來激活「擺動」。如果在選項卡或div中，用戶單擊，div應該是動畫並保持該狀態，直到再次單擊（即使發生了mouseleave）。

來源

2016-03-04 Hicki

我已經明顯地跳過這個問題，提出這個問題太早。多一點毅力，我已經整理了這個問題。

我已經想通了正確的使用.off（）的

如果任何人有做同樣任務的更好或更合適的方式，請隨意張貼。或者如果有任何批評我的代碼...

<script> 
    $(document).ready(function() { 

     click = 0; 

     $("#tab, #middleBox").click(function() { 
      if (click === 0) { 
       click = 1; 
       $("#middleBox").animate({ height: '400px' }, 500); 
       $("#middleBox, #tab").off("mouseenter mouseleave"); 
      } 
      else { 
       click = 0; 
       $("#middleBox").animate({ height: '30px' }, 850); 
      }; 
     }); 

     if (click === 0) { 
      //Do wiggle 
      $("#tab, #middleBox").mouseenter(function() { 
       $("#middleBox").animate({ height: "40px" }, 800); 
      }); 
      $("#middleBox").mouseleave(function() { 
       $("#middleBox").animate({ height: "30px" }, 800); 
      }); 
     } 
    }); </script>

來源

2016-03-04 16:26:48 Hicki

單擊＆mouseenter/mouseleave上的元素和其他元素

回答

相關問題