title: Bootstrap dropdown doesn't collapse on mobile
body: <p>I'm trying to use Bootstrap to create a responsive menu.</p>
  
  <p>I need help with making the dropdown collapse when it has been toggled on a mobile/tablet view.</p>
  
  <p>Currently it only toggles the menu open but doesn't know when to close it.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;!-- Navigation bar style --&gt;
      &lt;div class="culmn"&gt;
          &lt;nav class="navbar navbar-default bootsnav navbar-fixed"&gt;
              &lt;div class="navbar-top bg-grey fix"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;div class="navbar-callus text-left sm-text-center"&gt;
                                  &lt;ul class="list-inline"&gt;
                                      &lt;li&gt;&lt;a href="tel:123456789"&gt;&lt;i class="fa fa-phone"&gt;&lt;/i&gt;123456789&lt;/a&gt;&lt;/li&gt;
                                      &lt;!--&lt;li&gt;&lt;a href="mailto:mailhere@help.com"&gt;&lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt; Contact Us: mailhere@help.com&lt;/a&gt;&lt;/li&gt;--&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;div class="navbar-socail text-right sm-text-center"&gt;
                                  &lt;ul class="list-inline"&gt;
                                      &lt;li&gt;&lt;a target="_blank" href="#"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a target="_blank" href="#"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a target="_blank" href="#"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;!-- Start Search --&gt;
              &lt;div class="top-search"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;!-- &lt;form id="search"&gt;
                              &lt;input type="text" class="form-control" placeholder="Search"&gt;
                          &lt;/form&gt; --&gt;
                          &lt;input type="text" class="form-control" placeholder="Search"&gt;
                          &lt;span class="input-group-addon close-search"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- End Search --&gt;
  
  
              &lt;div class="container"&gt;
                  &lt;div class="attr-nav"&gt;
                      &lt;ul&gt;
                          &lt;li class="search"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;/button&gt;
                  &lt;a class="navbar-brand" href="index.html"&gt;
                      &lt;div class="title"&gt;Logo&lt;/div&gt;
                      &lt;div class="sub-title"&gt;Logo Sub&lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div id="navbar2" class="navbar-collapse collapse"&gt;
                &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a data-toggle="collapse" data-target=".navbar-collapse" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a data-toggle="collapse" data-target=".navbar-collapse" href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Dropdown here&lt;/a&gt;
                    &lt;ul class="dropdown-menu" role="menu"&gt;
                      &lt;li&gt;&lt;a href="one.html"&gt;One&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="two.html"&gt;Two&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="three.html"&gt;Three&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="four.html"&gt;Four&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="five.html"&gt;Five&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="six.html"&gt;Six&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="seven.html"&gt;Seven&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="eight.html"&gt;Eight&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                      &lt;li&gt;&lt;a data-toggle="collapse" data-target=".navbar-collapse" href="#about"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
          &lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
          &lt;!--/.container-fluid --&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;!-- End of navigation bar style --&gt;
  </code></pre>
  
  <p>When 'Dropdown here' has been toggled on a mobile/tablet device, it doesn't automatically close when clicked again. It simply stays open.</p>
  
  <p>Is there a way to add a toggle to ensure it closes when selected again?</p>
  
  <p>Would I possibly have to write a few lines of jQuery for this functionality or is it possible to have it done directly from Bootstrap?</p>