點擊並不總是觸發切換事件

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