javascript - 单击并不总是触发切换事件

Question

我有一种图像映射，它基本上是很多绝对定位的 div，单击时会显示或隐藏工具提示。看起来非常棒，除了它并不总是“有效”的事实。这听起来很傻，但有时我必须点击几次才能触发事件。也许我只是点击不够用力？ ;)

标记

<div class="container">
  <img src="img.png" />
  <div class="trigger"
    <div class="tooltip">
      Awesome tooltip is awesome!
    </div>
  </div>
</div>

风格

.container {
  width:100px;
  height:100px;
  position:relative; }

img {
    position:relative; }

.trigger {
  width:50px;
  height:50px;
  position:absolute;
  top:50px;
  left:50px; }

.tooltip {
  width:100px;
  height:20px;
  position:absolute;
  top:35px;
  left:35px;
  display:none; }

Javascript

$(".trigger").toggle(function () {
      $(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
      $(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
   }, function () {
      $(this).children(".tooltip").fadeOut(200);
   });

标记和 CSS 已简化，但想象一下我在图像上有几个工具提示。当我打开一个工具提示时，所有其他工具提示都应该关闭。我猜这是出了问题的地方，但我看不到错误。

在同一站点的类似功能中，我半动态地添加了一些 ID，并隐藏了所有 :not(ID)，但我不相信这是必要的。

编辑: 看哪， fiddle :http://jsfiddle.net/CfYRv/

Answer 1

将你的 javascript 改成类似的东西

$(".trigger").click(function () {
      $(".tooltip").fadeOut();
      $(this).children(".tooltip").fadeIn();
   });