title: Search box disappear by clicking outside the search box
body: <p>I have done the search box by jQuery toggle.</p>
  
  <pre><code>jQuery('.menu-search .icon-search').toggle(
      function() {
          jQuery('.menu-search form').fadeIn( "first" );
      },
      function() {
          jQuery('.menu-search form').fadeOut( "first" );
      }
  );
  </code></pre>
  
  <p>When i click the search icon, the search box appear and disappear when click on the search icon again. But i want to disappear when i click outside the search box. I tried for that, but it is not working.</p>
  
  <pre><code>jQuery('html').click(function (event) {
      jQuery('.menu-search form').fadeOut( "first" );
      event.stopPropagation();
  })
  </code></pre>
  
  <p>I know i can use the not(), But i tried that. it is also not working.
  I have tried like this</p>
  
  <pre><code>jQuery('html').not('.search-form fieldset').click(function (event) {
      jQuery('.menu-search form').fadeOut( "first" );
      event.stopPropagation();
  })
  </code></pre>
  
  <p>This is the HTML for the script.</p>
  
  <pre><code>&lt;li class="menu-search clearfix menu-item menu-item-type-post_type menu-item-object-page "&gt;&lt;i class="icon-search"&gt;&lt;/i&gt;&lt;form action="http://mybebsite.com/" class="search-form clearfix" style="display: block;"&gt;
      &lt;fieldset&gt;
  
          &lt;input type="submit" value="Go" class="submit"&gt;
          &lt;i class="icon-search"&gt;&lt;/i&gt;
          &lt;input type="text" class="search-form-input text" name="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" value="Search"&gt;
  
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/li&gt;
  </code></pre>