Пользовательский выбор в jQuery

Question

на моем сайте Я хочу сделать индивидуальный выбор. На клик я хочу, чтобы slideDown div, у которого есть некоторые фильтры. Состав:

<div class="select" style="position:relative;height:20px;"> 
    <span class="label">somelabel</span> 
    <div style="display:none;position:absolute;top:20px;left:0;" class="select_inner"> 
     <label for="something"> 
     <input type="text" name="something"> 
     </label> 
     <label for="something"> 
     <input type="text" name="something"> 
     </label> 
    </div> 
</div> 

Div с классом select_inner скрыт, я хочу показать, когда кто-то нажмите на диапазон ширины класса этикетке. И скрыть, когда кто-то нажимает на все остальное, кроме div с классом select_inner. И в этом проблема ... Я пробую что-то вроде этого:

$('.select').click(function(){ 
    var select = $('.select_inner', this); 
    select.slideDown(); 
    $(this).parents().click(function(){ 
     select.slideUp(); 
    }); 
}); 

И это работает, но неправильно. Когда я нажимаю на моем DIV, ребенок ДИВ скользит вниз и мгновенно вверх ...

Answer 1

Вы можете сделать это:

$('.select').click(function(event){ 
event.stopPropagation(); 
var select = $('.select_inner', this); 
select.slideDown(); 

}); 

$('html').click(function() { 
var select = $('.select_inner', this); 
select.slideUp(); 
}); 

Смотрите эту jsfiddle. Способ, которым он работает, заключается в том, что при каждом нажатии за пределами раздела select он пытается сместить div, но если вы нажмете на div select, он остановит это событие и сделает вместо этого slideDown.

EDIT

Я сделал ошибку в первоначальном сценарии. Я обновил сценарий выше, чтобы исправить проблему. См. Обновленную скрипту в IE и Firefox: http://jsfiddle.net/A6ZNY/1/

Answer 2

Попробуйте

$('.select span.label').click(function(){ 
    $('.select_inner').slideToggle("fast"); 
});