点击并不总是触发切换事件

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

Java脚本

$(".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），但我简直不认为这是必要的。

编辑：看哪，小提琴： http ： //jsfiddle.net/CfYRv/

Answer 1

将您的JavaScript更改为类似

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

Answer 2

加！ 需要完成我的作业，但简短的回答很长：切换在这里不起作用，因为您切换了子菜单，然后单击了另一个。 这将隐藏第一个子菜单，但仍被认为是打开的（仅被隐藏）。 因此，您需要单击两次才能将其打开...我找到了一个替代方法，但这并不是最好的代码。 至少可以让您知道需要做什么：

http://jsfiddle.net/uj2A4/

$(".trigger").click(function () {
      if($(this).hasClass("active"))
          $(".tooltip",this).fadeOut(200);
      else {
          $(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
          $(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
      }
      $(this).toggleClass("active");
      $(this).siblings(".trigger").removeClass("active");
   });

Answer 3

让我们使用单击来代替切换： http : //jsfiddle.net/CfYRv/3/

这为“活动”工具提示分配了一个css类“ ttactive”。 单击“某些触发器”将淡出每个活动的工具提示，并激活您刚刚单击的工具提示。 如果您刚刚单击的那个是活动的那个，那么它所做的就是淡化那个那个。

Answer 4

您可能仍可以通过以下方式使用切换：

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