自定义选择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> 

带类select_inner的Div是隐藏的，我想在有人点击跨度宽度类标签时显示它。当有人点击除class和select_inner之外的其他所有内容时隐藏。这就是问题...我尝试这样的：

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

它的工作原理，但错误。当我在我的div点击，孩子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 div，它将停止该事件并改为执行slideDown。

编辑

我在最初的剧本犯了一个错误。我更新了上面的脚本来解决这个问题。查看IE和Firefox中更新的小提琴：http://jsfiddle.net/A6ZNY/1/

Answer 2

尝试

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