jquery: пользовательское поле выбора - сворачивается, когда ничего не выбрано

Question

Эй, ребята, я пытаюсь создать простой пользовательский блок выбора с помощью jquery.

HTML:

<div class="select">
    <ul>
        <li class="option darr">Dropdown one</li>
        <li class="option">Dropdown two</li>
        <li class="option">Dropdown three</li>
    <ul>
</div>

JQuery:

$('.select ul li.option').click(function() {
    $(this).siblings().toggle().removeClass('darr');
    $(this).addClass('darr');
})

Вы можете проверить рабочий пример прямо здесь: http://jsfiddle.net/WFTvq/2/

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

Если я щелкну где-нибудь еще на экране, нормальное окно выбора рухнет, как я могу реализовать это поведение в моем примере?

Спасибо

час

Answer 1

Ответили на аналогичный вопрос в меню "Сделать поиск" исчезающим, когда поле поиска теряет фокус, но все же позволяет пользователю нажимать на ссылки.

Вы можете определить, когда мышь щелкает снаружи, выполнив

$(document).click(function(){
   ...
});

Полный код для вашего примера

$('.select ul li.option').click(function(e) {
    e.stopPropagation();
    $(this).siblings().toggle().removeClass('darr');
    $(this).addClass('darr');
});


$(document).click(function() {
    $('.select ul li.option').siblings().not('.darr').css('display', 'none');
});

Проверьте рабочий пример на http://jsfiddle.net/WFTvq/3/