Скрытие пользовательского раскрывающегося списка через 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 code

$('.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(); 
});