嵌套的多个选择框

Question

我已经创建了一个基于div的<select />框，可能它们可以作为跨浏览器使用。 问题是，我无法找到如何过滤其他选择框内的嵌套选择框。我的意思是，让它们仅适用于点击元素，而不适用于孩子。

以下是演示：http://jsfiddle.net/aspirinemaga/ejyRR/

想让它们以这种方式运作：

<div class="gui-selectbox">
  SELECTBOX1
  <div class="gui-selectbox">SELECTBOX2</div>
</div>

我知道这很容易，但我找不到合适的选择器来使它工作。提前感谢您的帮助和时间。

编辑 - 第二次演示：http://jsfiddle.net/aspirinemaga/ejyRR/2/

Answer 1

此处的问题数量

1. 您的开始点击事件应该在.gui-selectbox-button，而不是.gui-selectbox，并且应该返回false以确保它不会传播。
2. 您总是致电gui_selectbox_closeAll。你需要关闭所有不是目标的父母。由$('.gui-selectbox-dialog:visible').not($(event.target).parents('.gui-selectbox-dialog'))修正。为按钮做类似的事情。
3. 您的gui_selectbox_listAction设置了所有父母的值。你应该在那里使用closest()。