Функция jQuery Toggle конфликтует с Mouseup - PullRequest
Новая
       29

Функция jQuery Toggle конфликтует с Mouseup

0 голосов
/ 02 января 2012

Я пытаюсь создать выпадающее меню, которое можно открывать и закрывать с помощью кнопок Toggle и , его также можно закрыть, щелкнув в любом месте самого документа.

Когда человек нажимает кнопку Toggle, меню открывается правильно. Если посетитель затем щелкает в другом месте документа, меню закрывается , но требуется 2 щелчка , чтобы снова активировать функцию переключения этой кнопки. Конечно, я хотел бы уменьшить это значение до 1 клик .

Проверьте http://jsfiddle.net/MEweN/3/ на эту проблему. Кто-нибудь может мне помочь, пожалуйста?

Ответы [ 3 ]

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

Toggle сохраняет свое состояние на объекте, на котором вы его вызываете.Каждый раз, когда вы вызываете Toggle, он переключается между функцией 1 и функцией 2. Он ничего не знает о вашем приложении.Он просто чередует две функции, которые вы передаете, каждый раз, когда вы вызываете его.

Когда вы сбрасываете состояние всплывающего окна без использования Toggle, оно не синхронизируется, так как теперь не имеет представления о том, что вы хотите использовать.вернуться к первому состоянию.Поэтому, когда вы нажимаете снова, он выполняет вторую функцию, когда вы хотите, чтобы она выполнила первую функцию.

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

Работая с вашим реальным кодом, я также обнаружил, что обработка события mouseup в документе не очень совместима с обработкой события clickв объекте.Проблема заключается в том, что mouseup предшествует щелчку, поэтому вы получите оба события в последовательности, и вы не получите желаемого эффекта.Когда я переключился на щелчок в документе, он работал намного проще, например: 

$("#general_show").click(function () {
    var $this = $(this);
    if ($this.hasClass('selected')) {
        $this.removeClass('selected').parent().next().hide();
    } else {
        $this.addClass('selected').parent().next().show();
    }
    return(false);
});

$(document).click(function (e) {
    if ($('#general_info').is(':visible') &&
          $(e.target).parents('#general_info').length === 0) {
      $('#general_show').removeClass('selected').parent().next().hide();
      return(false);
    }
});

Рабочий пример: http://jsfiddle.net/jfriend00/KTNAq/

0 голосов
/ 02 января 2012 
$("#general_show").click(function () {
    if ( $('#general_info').is(':visible') ){
        // Hiding informations 

        $(this).removeClass('selected').parent().next().hide(); // try to always pass argument to removeClass, which class you want to remove
     } else {
        // Showin informations     
        $(this).addClass('selected').parent().next().show();

  }});

$(document).mouseup(function (e) {
    // We don't want to use this function when clicked on button
    if (e.target.id == 'general_show') return;

    if ( $('#general_info').is(':visible') ){

          $('#general_show').removeClass().parent().next().hide();
       }
});

JSFiddle link: http://jsfiddle.net/MEweN/5/

0 голосов
/ 02 января 2012 
  $("#general_show").click(function () {
      if( $(this).is('.selected') ){
          $(this).removeClass().parent().next().hide()
      }else{
          $(this).addClass('selected').parent().next().show()
      }
  });

  $(document).mouseup(function (e) {
    if (
        $('#general_show').is('.selected')
        && $(e.target).parents('#general_info').length === 0 
        && $(e.target).attr('id')!== "general_show"
    ) {
      $('#general_show').click()
    }
  });
...