title: I can't seem to get my dropdown code to function properly
body: <p>I am trying to create a drop down menu that when the drop down button is clicked it shows the sub menu. When I click anywhere else though it should hide the sub menu.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>function initMainNavigation( container ) {
  
      container.find( '.dropdown-toggle' ).click(function(e){
          var dropdown = $( this );
          e.preventDefault();
          dropdown.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
       });
  
      $("body").click(function(){
          var dropdown = container.find( '.dropdown-toggle' );
          dropdown.next( '.children, .sub-menu' ).removeClass('toggled-on');
      });
  
  }
  initMainNavigation( $( '.main-navigation' ) );
  </code></pre>
  
  <p>But when I click the dropdown toggle the sub menu won't show. When I debugged it in firebug, the <code>$("body").click()</code> event is triggered as well. I am guessing it's because the <code>'.main-navigation'</code> is inside the <code>"body"</code>.</p>
  
  <p>I know that it works if I remove <code>$("body").click()</code>. However I can't click else where to hide the sub menu.</p>