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

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

我如何使其在点击pin图像时，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');
    }
    );
});

//固定到图像
//mouseoverevent的JavaScript
$（文档）.ready（函数（）{
$（“#工具栏”）。悬停(
//鼠标悬停
函数（）{
$（“#工具栏”）。设置动画({
高度：'550'
}“慢”）；
},
//论慕斯奥特
函数（）{
$（此）。设置动画({
高度：'-=500px'
}“慢”）；
}
);
});

创建存储工具栏状态的标志变量。在mouseout函数中写入一个条件，如果状态为“pinted”，则该条件将绕过高度更改。

从图像中删除onclick并添加以下内容：

$('.pin').click(function(){
   $(this).toggleClass('.pinned');
   if(parseInt($('#toolbar').css('height')) < 500) $("#toolbar").animate({
      height: '550'
   }, 'slow');
});

---

现在，您可以使用.pinted类来可视化工具栏的状态。

下面的代码应该可以做到这一点（我还没有测试它是否确实有效）。使用更好的方法（可能使用切换）可以确保：

//mouseoverevent的JavaScript
$（文档）.ready（函数（）{
var Ispined=假；
$（“.pin”）。单击（函数（）{
$（“#工具栏”）.css（'height'，'500px'）；
isPinned=true；
});
$（“#工具栏”）。悬停(
//鼠标悬停
函数（）{
如果（！ispined）{
$（“#工具栏”）。设置动画({
高度：'550'
}“慢”）；
}
},
//论慕斯奥特
函数（）{
如果（！ispined）{
$（此）。设置动画({
高度：'-=500px'
}“慢”）；
}
}
);
});

$("#toolbar").hover(
    function() {
       // return if its pinned
       if($('#toolbar .pin').hasClass('pinned')) return;
       $("#toolbar").animate({
          height: '550'
       }, 'slow');
    },

   function() {
       // return if its pinned
       if($('#toolbar .pin').hasClass('pinned')) return;
       $(this).animate({
         height: '-=500px'
       }, 'slow');
    }
    );
});

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