title: Make Wordpress theme Underscores dropdown menu close when clicking outside of it
body: <p>I'm working with the WordPress starter theme Underscores and the dropdown menu can be opened and closed by clicking the 'menu' button. I'd also like it to close when I click somewhere else on the page though, and I can't for the life of me figure out how to do it. :(</p>
  
  <p><em>I've tried stuff like:</em></p>
  
  <pre><code>$(document).click(function(){
    $(".toggled").hide();
  });
  </code></pre>
  
  <p>But that doesn't work.</p>
  
  <p>This is the <code>navigation.js</code> file:</p>
  
  <pre><code>( function() {
  var container, button, menu, links, subMenus, i, len;
  
  container = document.getElementById( 'site-navigation' );
  if ( ! container ) {
      return;
  }
  
  button = container.getElementsByTagName( 'button' )[0];
  if ( 'undefined' === typeof button ) {
      return;
  }
  
  menu = container.getElementsByTagName( 'ul' )[0];
  
  // Hide menu toggle button if menu is empty and return early.
  if ( 'undefined' === typeof menu ) {
      button.style.display = 'none';
      return;
  }
  
  menu.setAttribute( 'aria-expanded', 'false' );
  if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
      menu.className += ' nav-menu';
  }
  
  button.onclick = function() {
      if ( -1 !== container.className.indexOf( 'toggled' ) ) {
          container.className = container.className.replace( ' toggled', '' );
          button.setAttribute( 'aria-expanded', 'false' );
          menu.setAttribute( 'aria-expanded', 'false' );
      } else {
          container.className += ' toggled';
          button.setAttribute( 'aria-expanded', 'true' );
          menu.setAttribute( 'aria-expanded', 'true' );
      }
  };
  
  // Get all the link elements within the menu.
  links    = menu.getElementsByTagName( 'a' );
  subMenus = menu.getElementsByTagName( 'ul' );
  
  // Set menu items with submenus to aria-haspopup="true".
  for ( i = 0, len = subMenus.length; i &lt; len; i++ ) {
      subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
  }
  
  // Each time a menu link is focused or blurred, toggle focus.
  for ( i = 0, len = links.length; i &lt; len; i++ ) {
      links[i].addEventListener( 'focus', toggleFocus, true );
      links[i].addEventListener( 'blur', toggleFocus, true );
  }
  
  /**
   * Sets or removes .focus class on an element.
   */
  function toggleFocus() {
      var self = this;
  
      // Move up through the ancestors of the current link until we hit .nav-menu.
      while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
  
          // On li elements toggle the class .focus.
          if ( 'li' === self.tagName.toLowerCase() ) {
              if ( -1 !== self.className.indexOf( 'focus' ) ) {
                  self.className = self.className.replace( ' focus', '' );
              } else {
                  self.className += ' focus';
              }
          }
  
          self = self.parentElement;
      }
  }
  } )();
  </code></pre>