javascript - 工具栏 JavaScript Pin to/Onmouseover 事件冲突

Question

我正在用 JavaScript 制作一个工具栏。该工具栏的常规高度为 50px。鼠标悬停时，其高度更改为 500px。然而，在此工具栏上，有一个用于图像的小图钉。我的目的是让这张图片将工具栏 div 的高度更改为 500px 并让它保持这种状态。目前我可以用图像更改工具栏 div，但在鼠标退出时它会变回原来的 50px 高度。

如何才能使单击图钉图像时，onmouseout 函数停止工作，直到再次单击该图像？

如果有帮助，这是我的代码:

//Pin to Image

<img class="pin" onClick = "document.getElementById('toolbar').style.height
= '500px';" src="images/pin.png" width="20px" height="20px" />


//JavaScript for mouseoverevent

$(document).ready(function() {

$("#toolbar").hover(

  //on mouseover
    function() {
       $("#toolbar").animate({
          height: '550'
       }, 'slow');
    },

//on mouseout
   function() {
       $(this).animate({
         height: '-=500px'
       }, 'slow');
    }
    );
});

Answer 1

下面的代码应该可以解决问题(我还没有测试它是否确实有效)。肯定可以用更好的方法来完成(也许使用切换):

<img class="pin" height="20px" src="images/pin.png" width="20px"/>

//JavaScript for mouseoverevent
$(document).ready(function() {
  var isPinned = false;
  $(".pin").click(function(){
    $("#toolbar").css('height', '500px');
    isPinned = true;
  });


  $("#toolbar").hover(
    //on mouseover
    function() {
      if(!isPinned) {
          $("#toolbar").animate({
            height: '550'
          }, 'slow');
      }
    },

    //on mouseout
    function() {
      if(!isPinned) {
          $(this).animate({
            height: '-=500px'
          }, 'slow');
      }
    }
    );
});