Скрытие собственного выпадающего списка через jQuery

Question

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

Вот ссылка на мой пример скрипки: http://jsfiddle.net/dg7Lc/34/

Любая помощь будет принята с благодарностью, спасибо!

-D

Answer 1

Вы могли бы добавить пару id теги для решения этой проблемы: http://jsfiddle.net/dg7Lc/35/

В этом примере мы просто должны явно slideToggle:

$('#custom-select-1').click(function() {
    $(this).find('ul').slideToggle('fast'); 
    $('#custom-select-2').find('ul').hide();     
});

$('#custom-select-2').click(function() {
    $(this).find('ul').slideToggle('fast');   
    $('#custom-select-1').find('ul').hide();                     
});

Answer 2

Вот рабочий код jquery

$('.custom-select').click(function() {

    $(this).find('ul').slideToggle('fast');  
   $(this).siblings().find('ul').slideUp('fast');      
});


$('.custom-select ul li').click(function() {
    var $this = $(this);
     $this.closest('.custom-select').find('span').html($this.html());
});


$('.custom-select').click(function(e) {
    e.stopPropagation();
});


$(document).click(function() {
    $('.custom-select ul').hide();
});
​

Демоверсия Jsfiddle http://jsfiddle.net/dg7Lc/36/

Answer 3

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

http://jsfiddle.net/ExpJj/

/* cache main list elements so each doc click isn't a DOM search*/
var $lists = $('.custom-select');

$lists.click(function(e) {
    e.stopPropagation();
    $lists.not(this).find('ul:visible').hide()
    var $tgt = $(e.target);
    $(this).find('ul').slideToggle('fast');
    if ($tgt.is('li')) {
        $(this).find('span').html($tgt.html());
    }
})

$(document).click(function(e) {
    $lists.find('ul:visible').hide();
});