Клик не всегда вызывает событие переключения

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 упрощены, но представьте, у меня есть несколько всплывающих подсказок над изображением.Когда я открываю одну подсказку, все остальные должны быть закрыты.Я предполагаю, что здесь все идет не так, но я не вижу ошибки.

В аналогичной функции на том же сайте я полудинамически добавил некоторые идентификаторы и скрыл все, что есть.: не (удостоверение личности), но я просто не могу поверить, что это необходимо.

РЕДАКТИРОВАТЬ: Вот, скрипка: 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

Вероятно, вы все еще можете использовать переключатель таким образом:

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

Answer 4

Вместо того, чтобы переключать, давайте использовать click: http://jsfiddle.net/CfYRv/3/

Это назначает "активную" всплывающую подсказку для класса css "ttactive".Нажатие на «некоторый триггер» затухает в каждой активной всплывающей подсказке и активирует ту, которую вы только что нажали.Если тот, который вы только что щелкнули, был активным, все, что он делает, это затухает.