Невозможно скрыть элемент на клик по какой-то причине

Question

у меня есть элемент на моем сайте, это выглядит так:

<div class="nw_help"><div class="nw_help_content">...</div></div> 

Легкий материал. Использование CSS на nw_help: hover, nw_help_content становится видимым. В целях поддержки сенсорных экранов тоже, я написал следующее:

$(document).ready(function() { 
    $('.nw_help').click(function() { 
     $(this).find(".nw_help_content").css('visibility', 'visible'); 
    }); 
}); 
$(document).ready(function() { 
    $('.nw_help_content').click(function() { 
     $(this).css('visibility', 'hidden'); 
    }); 
}); 

Первая функция работает безупречно, второй не хочу работать на всех. Я проверил, если $ ('. Nw_help_content'). Css ('visibility', 'hidden'); работает в консоли браузера, и это так.

Любые идеи?

Заранее благодарим за ваш ответ.

Редактировать: теперь он ударил меня: первая функция запускается при нажатии кнопки nw_help_content, а также «нейтрализует» вторую функцию. Но как это предотвратить?

Answer 1

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

$(document).ready(function() { 
    $('.nw_help').click(function() { 
     $(this).find(".nw_help_content").css('visibility', 'visible'); 
    }); 


    $(document).on('click', '.nw_help_content', function() { 
     $(this).css('visibility', 'hidden'); 
    }); 
}); 

Кроме того, требуется только один готовый оператор DOM.

Демо: http://jsfiddle.net/7sM3L/4/

Answer 2

Я предлагаю держаться подальше от прямого манипулирования правила CSS на этом. Просто использование jQuery show и hide даст более солидный/надежный результат.

$(document).ready(function() { 
    $('.nw_help').click(function() { 
     $(this).find('.nw_help_content').show(); 
    }); 
}); 
$(document).ready(function() { 
    $('.nw_help_content').click(function() { 
     $(this).hide(); 
    }); 
}); 

Answer 3

Это на самом деле работает/Поскольку дивы вложены вы оба события огнь и ДИВ скрыто и отображаются на одном щелчке мыши. использовать toggle вместо.

$(document).ready(function() { 
     $('.nw_help').click(function() { 
      $(this).find(".nw_help_content").toggle(); 
     }); 
    }); 

Отъезд fiddle

Answer 4

Как говорит Zenith, это связано с кипящий событие ... Другим решением является связать событие только для внешнего контейнера и просто проверить на visibilty:

$(document).ready(function() { 
    $('.nw_help').click(function() { 
     var content = $(this).find('.nw_help_content'); 
     if(content.css('visibility') == 'hidden') { 
      content.css('visibility','visible'); 
     } else { 
      content.css('visibility','hidden'); 
     } 
    }); 
});