Question

我在Asp.Net网页上有一个左侧菜单。单击箭头图像时，菜单会显示/显示。并更改箭头图像（箭头的左右方向）。如下：

HTML：

<div id="needle">
   <div id="arrowDiv"> 
     <img id="imgArrows" src="../Style/images/arrow-back.png" />
  </div>
</div>

 <div id="leftmenu">
    //..
 </div>

JS：

$(document).ready(function () {
$("#needle").click(function () {
 if ($('#leftmenu').is(':hidden')) {
$('#leftmenu').show();
$("#imgArrows").attr("src", "../Style/images/arrow-back.png");

} else {
$('#leftmenu').hide();
$("#imgArrows").attr("src", "../Style/images/arrow-forward.png");

}
});
});

我想添加一个简单的工具提示，当客户端悬停在工具提示上时，工具提示消息显示并写入＆＃34;隐藏＆＃34;或＆＃34;显示＆＃34;作为一条消息。（取决于div是否已关闭工具提示消息将是＆＃34;显示＆＃34;，如果打开;那么消息将是＆＃34;隐藏＆＃34;图像悬停）

到目前为止，我写过这篇文章。不工作。你能帮帮我吗？

$(document).ready(function () {
$("#needle").click(function () {
 if ($('#leftmenu').is(':hidden')) {
$('#leftmenu').show();
$("#imgArrows").attr("src", "../Style/images/arrow-back.png");
 $("#imgArrows").attr('title', 'Hide');
} else {
$('#leftmenu').hide();
$("#imgArrows").attr("src", "../Style/images/arrow-forward.png");
 $("#imgArrows").attr('title', 'Show');
}
 $('#imgArrows').hover(function () {
 $('#imgArrows').tooltip();
 });
});
});

Answer 1

您附加悬停事件的功能位于点击事件中。所以只需将它移到click事件之外就可以了。另外，正如我所看到您使用的是jQuery UI，所以不要忘记添加对该库的引用。

在你发布的html代码中，你有一个额外的结束div。

这是HTML：

<div id="needle">
 <div id="arrowDiv"> 
 <img id="imgArrows" src="../Style/images/arrow-back.png" /></div>
 </div>
<div id="leftmenu">
//..
</div>

和js：

$(document).ready(function () {
   $("#needle").click(function () {
      if($('#leftmenu').is(':hidden')) {
         $('#leftmenu').show();
         $("#imgArrows").attr("src", "../Style/images/arrow-back.png");
         $("#imgArrows").attr('title', 'Hide');
   } else {
         $('#leftmenu').hide();
         $("#imgArrows").attr("src", "../Style/images/arrow-forward.png");
         $("#imgArrows").attr('title', 'Show');
  }
});

   $('#imgArrows').hover(function () {
      alert('inside');
   },function(){
      alert('outside')
   });
});

编辑：实际上你可以使用回调函数。这就像每当用户将鼠标悬停在图像上时所说的那样＆＃34;在＆＃34;内，当鼠标在外面时（回调函数），它表示＆＃34;在＆＃34;之外。希望很清楚。

第二次编辑。如果你想跟踪if＆＃34; left-menu＆＃34;的状态打开或关闭你可以引入另一个这样的变量：

 $(document).ready(function () {

   var isHidden = false;

   $("#needle").click(function () {
      if($('#leftmenu').is(':hidden')) {
         $('#leftmenu').show();
         $("#imgArrows").attr("src", "../Style/images/arrow-back.png");
         $("#imgArrows").attr('title', 'Hide');
         isHidden = true; /*set it to true*/
   } else {
         $('#leftmenu').hide();
         $("#imgArrows").attr("src", "../Style/images/arrow-forward.png");
         $("#imgArrows").attr('title', 'Show');
         isHidden = false; /*set it to false*/
  }
});

   $('#imgArrows').hover(function () {
      /*here you check value of isHidden variable*/
      if(isHidden){ 
          $("#imgArrows").attr('title', 'Show');
     }
   },function(){
       $("#imgArrows").attr('title', 'Hide');
   });
});

JQuery在悬停时更改工具提示消息，具体取决于div状态

1 个答案: