Блог

Главная - Вопросы по программированию - функция переключения с щелчком документа для закрытия

функция переключения с щелчком документа для закрытия

#jquery #function #toggle #document #show-hide

#jquery #функция #переключение #документ #показать-скрыть

Вопрос:

У меня проблема с переключением функций и документов, может быть, кто-нибудь может помочь мне улучшить мою функцию.

У меня есть функция переключения, которая может открывать и закрывать элемент. Если вы нажмете на элемент, он откроется. Затем, если вы нажмете на него еще раз, он закроется, и функция переключения сработает. Однако я перешел на следующий уровень, где, если вы нажмете на элемент, он откроется, а если вы нажмете за пределами элемента (документа), он закроется.

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

 <ul>
<li id='drop'>down</li>
<ul id='menu'>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>

$('li#drop').toggle(function () {
    //show its submenu
    $('ul', this).show();
}, function () {
    //hide its submenu
    $('ul', this).hide();
}
);
$(document).click(function(){
    $('ul#menu').hide();
});

Ответ №1:

Вместо использования .toggle() вы можете проверить, отображается ли ul при нажатии на li

 $('li#drop').click(function(e){
  e.stopPropagation();

  if($('ul#menu').is(':visible')) {
    $('ul#menu').hide();
  }
  else {
    $('ul#menu').show();
  }
});

Комментарии:

1. не похоже, что его работа, функция $(document).click(… заставляет его не работать. Я пытаюсь заставить это работать

2. извините, в моем коде было несколько ошибок. Попробуйте обновленный код

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

Ответ №2:

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

Чтобы решить эту проблему, вам, вероятно, не следует использовать toggle() , а просто реализовать поведение переключения самостоятельно, чтобы оно работало правильно при вызове из нескольких разных мест.