自定義選擇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

回答

相關問題