JQuery Toggle работает с первого клика, но не снова - PullRequest
Новая
       28

JQuery Toggle работает с первого клика, но не снова

3 голосов
/ 02 февраля 2012

Я создаю div, который отображается (переключается) при нажатии на другой элемент.

Он должен отображаться при щелчке на якоре (#toggle-contents) и скрываться, если я нажимаю на тот же якорьили где-то еще в документе.

Я следую коду в этом практическом руководстве: Творческое наложение / всплывающее окно с jQuery .

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

Разметка: 

<div id="block-header">
    <a id="trigger-contents">Toggle</a>
  </div>
  <div id="block-contents">
  </div>

JavaScript: 

function registerToggleDiv( trigger, toggle )
{
  $( '#' + trigger ).click(function() 
    {
      $( '#' + toggle ).toggle(function() 
      {
        console.log('toggle');
        $(document).click(function(event) 
        {
          if ( !($(event.target).is('#' + toggle ) || 
                $(event.target).parents('#' + toggle ).length || 
                $(event.target).is( '#' + trigger ))) 
          {
            console.log('toggle hide');
            $('#' + toggle ).hide(500);
          }
        });
      });
    });
}
registerToggleDiv( 'trigger-contents', 'block-contents' );

Я попытался найти ошибку по сравнению с другими вопросами-переключателями здесь, но не нашел подсказки.

Спасибо за любые подсказки!

1 Ответ

1 голос
/ 02 февраля 2012

Когда вы нажимаете trigger, происходит распространение и документ onclick запускается.

Вы привязываетесь к документу onclick событие: 

$('#' + toggle ).hide(500);

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

$( '#' + trigger).click(function(e){
    e.stopPropagation();
});
...