在多个元素之外单击时隐藏

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。

他还提供了所有的代码和解释。祝你好运:)