title: Cannot get :not() selector to function properly
body: <p>I'm building a select box out of divs and spans. Everything works, but now I'm trying to add a :not() selector to detect if the dropdown box is visible when a user clicks anything other than #signup-currency-selectbox and its children. If it is visible, it needs to be hidden at that point. Here is what I currently have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="signup-currency-selectbox" class='selectBox'&gt;
      &lt;span id="signup_currency" class='selected'&gt;&lt;/span&gt;
      &lt;span class='selectArrow'&gt;&lt;/span&gt;
      &lt;div class="selectOptions" &gt;
          &lt;span class="selectOption signup-currency" value="1"  &gt;$USD&lt;/span&gt;
          &lt;span class="selectOption signup-currency" value="4"  &gt;£GBP&lt;/span&gt;
          &lt;span class="selectOption signup-currency" value="6"  &gt;€EUR&lt;/span&gt;
          &lt;span class="selectOption signup-currency" value="2"  &gt;$CAD&lt;/span&gt;
          &lt;span class="selectOption signup-currency" value="3"  &gt;$AUD&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(":not(.selectBox)").click(function(){
       $('div.selectOptions').css('display','none');
  });
  </code></pre>
  
  <p>Now I have multiple selectbox's with the class .selectBox, so would it be best to use .each every time a user clicks something other than the .selectBox? For some reason the function is performed even if .selectBox and any of its children are clicked. Does anyone see anything wrong here? Also, I removed the if statement (not sure if I needed it to begin with).</p>