自定义选择jQuery

我的网站上我想做一个自定义选择。点击我想slideDown一个div，其中有一些过滤器。结构：自定义选择jQuery

<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滑下，瞬间可达...

来源

2012-03-16 ddziaduch

你可以这样做：

$('.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/

来源

2012-03-16 13:15:53 Rondel

它完美的工作！谢谢！ – ddziaduch 2012-03-16 13:40:13

没问题。不要忘了选择答案旁边的勾号将其标记为正确的答案。 – Rondel 2012-03-16 13:50:08

再次问候。这是不工作在Firefox和IE：（ – ddziaduch 2012-03-16 14:51:17

尝试

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

来源

2012-03-16 13:10:36 edsk

自定义选择jQuery

回答

相关问题