title: How to collapse(close) the Bootstrap expanded menu on devices like iPhone, iPad, Smartphones, tablets etc. upon touching anywhere other than the menu?
body: <p>I'm developing a website using <strong>Bootstrap framework v2.0.1</strong>.</p>
  
  <p>When my website is browsed on devices like iPhone, iPad, other tablets, smartphones, etc. the horizontal menu that appears in browser on PC or laptop gets collapsed to an icon. This icon is placed at top right corner of the screen of device.</p>
  
  <p>When user touches this icon the menu gets expanded. If user touches any of the menu items from this expanded menu the menu gets collapse(closed) and the respective page linked with that menu gets open. </p>
  
  <p>Till now everything works fine for me. But I want to collapse(close) the expanded(opened) menu when user touches anywhere on the surface of the screen that appears below the expanded(opened) menu.</p>
  
  <p>I tried to achieve this but couldn't succeed in my attempt so asking for your help. </p>
  
  <p>For your reference I'm putting below the HTML and jQuery code that I tried:</p>
  
  <p>The HTML code that I have:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Page Title&lt;/title&gt;
      &lt;link href="bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="example-fixed-layout.css" rel="stylesheet"&gt;    
      &lt;link href="bootstrap-responsive.css" rel="stylesheet"&gt;
      &lt;link href="bootstrap-modal.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="navbar navbar-fixed-top navbar-inverse" style="position:fixed"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
            &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="band" href="index.php"&gt;&lt;img src="logo.png"/&gt;&lt;/a&gt;
            &lt;div class="nav-collapse"&gt;&lt;!-- This is the menu that I want to toggle --&gt;
              &lt;ul class="nav  pull-right navbar-fixed-bottom" style="font-size:11px"&gt;
                &lt;li&gt;&lt;a href="login.php"&gt;&lt;i class="icon-user icon-black"&gt;&lt;/i&gt;LOGIN&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="register.php"&gt;&lt;i class="icon-pencil icon-black"&gt;&lt;/i&gt;REGISTER&lt;/a&gt;&lt;/li&gt;             
                &lt;li&gt;&lt;a href="request.php"&gt;&lt;i class="icon-edit icon-black"&gt;&lt;/i&gt;MY REQUESTS&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="status.php"&gt;&lt;i class="icon-edit icon-black"&gt;&lt;/i&gt;STATUS&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="contact.php"&gt;&lt;i class="icon-envelope icon-black"&gt;&lt;/i&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="profile.php"&gt;&lt;i class="icon-user  icon-black"&gt;&lt;/i&gt;MY ACCOUNT&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="location.php"&gt;&lt;i class="icon-map-marker icon-black"&gt;&lt;/i&gt; LOCATE HERE&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="login.php"&gt;&lt;i class="icon-user  icon-black"&gt;&lt;/i&gt;LOG OUT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container" style="padding-top: 125px;"&gt;
      Some HTML code
      ---------------------------------------------------
      ---------------------------------------------------
      ---------------------------------------------------
      &lt;/div&gt;
      &lt;div class="container"&gt;
      Some HTML code
      ---------------------------------------------------
      ---------------------------------------------------
      ---------------------------------------------------
      &lt;/div&gt;
      &lt;div class="container" style="margin-bottom:70px;"&gt;
      Some HTML code
      ---------------------------------------------------
      ---------------------------------------------------
      ---------------------------------------------------
      &lt;/div&gt;
      &lt;footer style="background-color:#000" id="footer"&gt;
        &lt;div class="container"&gt;
        Some HTML code
        ---------------------------------------------------
        ---------------------------------------------------
        ---------------------------------------------------
        &lt;/div&gt;
      &lt;/footer&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-tooltip.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-alert.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-button.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-carousel.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-collapse.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-dropdown.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-modal.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-popover.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-scrollspy.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-tab.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-transition.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-typeahead.js"&gt;&lt;/script&gt; 
      &lt;script src="bootstrap-modalmanager.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The jQuery code I tried but it didn't work out:</p>
  
  <pre><code>$(document).ready(function(){
    $("div.container").click(function(e){ // When user touches anywhere on any of the div present with class "container" we detect what element we are clicking.
      if ($(!e.target).hasClass(".nav-collapse")){ //if the element is not our menu, we use the inbuilt bootstrap method to collapse back(close) this expanded(opened) menu i.e. &lt;div class="nav-collapse"&gt;-----&lt;/div&gt; 
        $('.nav-collapse').collapse('hide');
      };
    });
  });
  </code></pre>
  
  <p>In short I want to collapse back(close) the expanded(opened) menu when user touches anywhere   at any part on any of the . Also the original functionality of collapsing(closing) the menu upon selection of any of the menu item should remain as it is. It shouldn't get affect in any way.</p>
  
  <p>How should I achieve this?</p>
  
  <p>Thanks in advance.</p>