Почему не работает мой Toggler на jQuery?

Question

[Vlad Harbarchuk]

Здравствуйте!
Уже несколько часов потратил, никак не могу понять почему не работает мой простой скрипт на JQ. Суть проста: мы кликает на элемент с ID "toggle" и он добавляет класс "visible" к другому элементу с ID "toggle-content" а также добавляет событие, когда при клике на любой элемент кроме самого "toggle-content" класс "visible" удаляется.

Вот тут код: jsfiddle.net/SilvaGT/9ashesbb

Первый раз при нажатии на Toggle работа корректна, то есть элемент "toggle-content" отображается. Но потом обратно исчезает только если нажать на "Toggle" снова, а не на любой элемент кроме "toggle-content". И после этого второй раз уже отобразить\показать блок нельзя.

Никак не могу понять в чем проблема, может кто-то сможет подсказать почему скрипт не работает...

Answer 1

[Atllantis]

Ваш код (многим лучше смотреть код здесь, чем лезть на сторонний сайт):

$("#toggle").click(function(){
	if ( $( "#toggle-content" ).hasClass( "visible" ) ) {
		    $(document).on('click', function(e) {
        if (e.target.id !== '#toggle-content') { 
					$( "#toggle-content" ).removeClass("visible");
        }
    });
	} else {
		$( "#toggle-content" ).addClass( "visible" );
	}	
});

Я Вас удивлю, но Ваш код и то, чего Вы хотите от него добиться - немного не совместимы ))
Посмотрите внимательней на первую часть условия. И ещё момент, зачем вешать обработчик кликов внутри обработчика (или слушателя, кому как удобнее)?

Comments

[Анатолий]

Не учите человека плохому =) Пусть лучше ставит там, где его можно стразу протестировать и посмотреть результат =)

[Сергей]

Лучше код смотреть на том сервисе, это намного лучше чем размещать его здесь

Answer 2

[Виталий Ф.]

$(document).on('click', function(e) {
  if (e.target.id == 'toggle') {
    if (!$("#toggle-content").hasClass("visible")) {
      $("#toggle-content").addClass("visible");
    } else {
      $("#toggle-content").removeClass("visible");
    }
  } else {
    if ($("#toggle-content").hasClass("visible") && e.target.id !== 'toggle-content') {
      $("#toggle-content").removeClass("visible");
    }
  }
});

Comments

[Виталий Ф.]

только вот будут проблемы, когда в открывающийся элемент ссылок напихаете...

Answer 3

[lega]

Поправил ваш пример.
Подробности тут.