Question

我正在用div和span构建一个选择框。一切正常，但现在我正在尝试添加：not（）选择器来检测当用户点击＃signup-currency-selectbox及其子项以外的任何内容时，下拉框是否可见。如果它是可见的，则需要在该点隐藏它。这是我现在拥有的：

HTML：

<div id="signup-currency-selectbox" class='selectBox'>
    <span id="signup_currency" class='selected'></span>
    <span class='selectArrow'></span>
    <div class="selectOptions" >
        <span class="selectOption signup-currency" value="1"  >$USD</span>
        <span class="selectOption signup-currency" value="4"  >£GBP</span>
        <span class="selectOption signup-currency" value="6"  >€EUR</span>
        <span class="selectOption signup-currency" value="2"  >$CAD</span>
        <span class="selectOption signup-currency" value="3"  >$AUD</span>
    </div>
</div>

jQuery的：

$(":not(.selectBox)").click(function(){
     $('div.selectOptions').css('display','none');
});

现在我有多个选择框和.selectBox类，所以每次用户点击.selectBox以外的其他内容时最好使用.each吗？由于某种原因，即使单击.selectBox及其任何子项，也会执行该函数。这里有人看错吗？另外，我删除了if语句（不确定我是否需要它开始）。

Answer 1

Yikes，看起来像一个效率低下的选择器。我会这样做：

$(document).click(function() {
    $('div.selectOptions').hide();
});

$('.selectBox').click(function(e) {
    e.stopPropagation();
});

如果您点击.selectBox之外，该事件将冒泡到document，并且div将被隐藏。如果你点击里面，将阻止冒泡并且div将保持打开状态。

无法获取：not（）选择器才能正常运行

1 个答案: