在多個元素之外單擊時隱藏

Question

我需要在jQuery中創建交叉瀏覽器風格的標記。所以，而不是使乾淨的HTML SELECT元素標籤，我使用嵌套元素。頁面上會有很多可用的選擇框，因此它們應該彼此正確地工作。

編輯：淡入效果 「淡入（）/淡出（）」 應當被用來代替 「隱藏（）/顯示（）」

介紹一個例子：

代替具有經典下拉列表中的清潔html元素：

<select> 
    <option>Option 1</option> 
    <option>Option 1</option> 
    <option>Option 1</option> 
</select> 

我有嵌套的元素，所以我可以適當他們的風格：

<div class="gui-selectbox"> 
    <a class="gui-selectbox-button"> 
    <span class="gui-btn-l"></span> 
    <span class="gui-btn-c">Option 1</span> 
    <span class="gui-btn-r"></span> 
    </a> 
    <div class="gui-selectbox-dialog"> 
    <ul> 
     <li>Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
    <ul> 
    </div> 
</div> 

下面是代碼：http://jsfiddle.net/aspirinemaga/XR4Y3/

應該以這種方式工作：

• 當我的任何元素上點擊，它應該關閉所有selectboxes
• 當我點擊在「.gui-selectbox-button」上，它應該顯示「.gui-selectbox-dialog」其父「.gui-selectbox」
• 如果用戶cli 「.gui-選擇框按鈕」和「.gui-選擇框，對話框」之外中正，它應該關閉每個打開的selectboxes

更新：

我怎麼能告訴工作以不關閉如果當前目標是它的孩子，父母div？

這裏是一個例子：http://jsfiddle.net/aspirinemaga/ejyRR/5/。這是第三個因素。

Answer 1

你可以合併你的代碼相當多。這將做你想要的。

例1

$('html').on('click', function() { 
    $('.gui-selectbox-dialog:visible').hide(); 
}); 

$('.gui-selectbox').on('click', function(event) { 
    $('.gui-selectbox-dialog:visible').hide(); 
    $(this).find('.gui-selectbox-dialog').show(); 

    event.stopPropagation(); 
}); 

$('.gui-selectbox-dialog ul').on('click', 'li', function(event) { 
    alert('selected = ' + $(this).text()); 

    event.stopPropagation(); 
}); 

小提琴演示：http://jsfiddle.net/tJ7Qb/

編輯：更新了我的代碼和演示聯繫，因爲我一直在使用舊.click()事件的方法和部分一些使用新.on()方法。還在選項點擊時添加了提醒。

Answer 2

你可以做的是將click()函數分配給你的身體。並在此功能內確認哪個元素被完全點擊。如果它不是您的「選擇」框，請關閉打開的框。否則，打開或關閉被點擊的那個。

讓我澄清一下它的一些代碼：

$(document).click(function(event) { 

    if (gui_currentSelectboxID != null) { 
     $this = $(event.target); 
     $parent = $this.parent().parent(); 

     //Check if the clicked item was NOT the gui-selectbox option 
     if ($parent.attr('class') != 'gui-selectbox') { 
      $('#' + gui_currentSelectboxID).children('.gui-selectbox-dialog').fadeOut(100); 
      $('#' + gui_currentSelectboxID).children('.gui-selectbox-button').removeClass('active'); 
     } 
    } 

}); 

這應該做的伎倆：

http://jsfiddle.net/XR4Y3/5/

您可以通過驗證，如果.parent().parent()實際存在還是優化這一點，因爲實例document將不會有兩個父母。其他優化將使用您實際聲明的功能來隱藏選擇框等。

Answer 3

Actualy，Chris Coyer @ CSS-Tricks.com already did what you're trying to do。

他還提供了所有的代碼和解釋。祝你好運:)