Question

我需要在jQuery中制作crossbrowser样式标签。因此，我使用嵌套元素而不是制作干净的html SELECT元素标签。页面上会有很多选择框可供选择，因此它们应该可以正常使用。

编辑：淡入淡出效果“fadeIn（）/ fadeOut（）”应该用来代替“hide（）/ show（）”

介绍一个例子：

而不是下拉列表的经典清洁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/

它应该以这种方式工作：

当我点击任何元素时，它应该关闭所有选择框
当我点击“.gui-selectbox-button”时，它应显示其父级“.gui-selectbox”的“.gui-selectbox-dialog”
如果用户点击“.gui-selectbox-button”和“.gui-selectbox-dialog”之外，则应关闭每个打开的选择框

更新：

如果当前目标是其子节点，我怎么能告诉函数不关闭父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()功能分配给您的身体。在此函数中，验证哪个元素被完全单击。如果它不是你的选择＆＃34;选择＆＃34;盒子，关闭开放的。否则，打开或关闭点击的那个。

让我在一些代码中澄清一下：

$(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 。

他还提供了所有代码和解释。祝你好运：）

单击多个元素外部时隐藏

3 个答案: