Скрыть список на размытие

Question

Когда я нажимаю кнопку, у меня появляется список, проблема в том, что я хочу скрыть список всякий раз, когда он теряет фокус, т.е. пользователь нажимает в любом месте на странице, но не в этом списке. Как я могу это сделать? Также вы можете посмотреть, как это должно выглядеть на last.fm, где находится список настроек профиля (li.profileItem). (ul.del li ul по умолчанию display:none) Базовая структура списка:

<ul class='del'>
    <li>
        <button class='deletePage'></button>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

Моя функция для отображения этого списка:

$(".deletePage").click(function(){
    if( $(this).siblings(0).css("display") == "block" ){
        $(this).siblings(0).hide();
    } else {
        $(this).siblings(0).show();
    }
});

Answer 1

См. Как обнаружить щелчок вне элемента?

Вы можете привязать обработчик click к document, чтобы скрыть список, а затем прикрепить отдельный обработчик ккнопка, которая вызывает event.stopPropagation.

$(document).click(function() {
 $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
 event.stopPropagation();
});

В качестве альтернативы, вы можете использовать jQuery внешний плагин внешних событий :

$('.show-list-button').bind('clickoutside', function() {
 $('.list-to-hide').hide(); 
});

Answer 2

Вы можете использовать событие щелчка документа. Если пользователь щелкает внутри div, то распространение события останавливается там (e.stopPropagation), иначе оно будет обработано событием click документа, которое проверяет, открыто ли меню и закрывает ли оно его.

$(document).click(function() { 
  // check if the menu is open, if so close it
});

$("#windowdiv").click(function(e){
  e.stopPropagation();
  // do stuff
});

Answer 3

Проверьте Плагин Бена Алмана "Внешние события" , который добавляет bind('clickoutside') возможность обрабатывать подобные вещи.