Невозможно получить: селектор not() для правильной работы

Question

Я создаю поле выбора из divs и spanans. Все работает, но теперь я пытаюсь добавить селектор: 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, так было бы лучше использовать .each каждый время пользователь нажимает что-то, кроме .selectBox? По какой-то причине функция выполняется, даже если нажата кнопка .selectBox и любой из ее дочерних элементов. Кто-нибудь видит здесь что-то не так? Кроме того, я удалил оператор if (не уверен, нужно ли мне это для начала).

Answer 1

Yikes, это выглядит как неэффективный селектор. Я хотел бы сделать это:

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

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

Если щелкнуть за пределами .selectBox, то событие будет скрыт пузырь до document, и дивы. Если вы нажмете внутри, пузырь будет предотвращен, и div будут оставаться открытыми.