0

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

3 回答 3

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 类来可视化工具栏的状态。

于 2012-12-19T10:13:21.360 回答
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');
      }
    }
    );
});
于 2012-12-19T10:14:03.967 回答
0

创建一个存储工具栏状态的标志变量。在 mouseout 函数中编写一个条件，如果状态为“固定”，则绕过高度变化。

于 2012-12-19T10:04:57.517 回答