Question

我正在使用JavaScript制作工具栏。此工具栏的常规高度为50px。鼠标悬停时，它的高度变为500px。然而，在这个工具栏上，有一个小图像。我的目的是使这个图像将工具栏div的高度更改为500px并让它保持这种状态。目前我可以使用图像更改工具栏div，但是onmouseout它会更改回原来的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

从图像中删除onclick并添加：

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

并编辑#toolbar悬停功能：

$("#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');
    }
    );
});

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

Answer 2

以下代码应该做的伎俩（我还没有测试它是否有效）。它可以通过更好的方式确定（可能使用切换）：

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

Answer 3

创建一个存储工具栏状态的标志变量。在mouseout函数内写一个条件，如果状态为'pinned'，则绕过高度变化。

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

3 个答案: