title: Bootstrap's dropdown menu disappears after two clicks
body: <p>I am facing issue with Bootstrap based dropdown menu (nothing fancy, just a navigation). Everything works smoothly, but when I want to collapse the dropdown by clicking on it, it disappears, yet shows up when I hover or click it again. I have read some threads about stopPropagation() function but it still does not work. Here is my code.</p>
  
  <pre><code>                        &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="author" content="Matt O'Such"&gt;
  
          &lt;title&gt;&lt;/title&gt;
          &lt;script src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="css/normalize.css"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
  
          &lt;style&gt;
          body { 
          background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
          background-image: -moz-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
          background-image: -o-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
          background-image: -ms-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
          background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.8)), to(rgba(51, 51, 51, 0.8))), url("images/background-homepage.jpg");
          background-image: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.8)), url("images/background-homepage.jpg");
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-homepage.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-homepage.jpg', sizingMethod='scale')";
          }
  
          .navbar-default .navbar-nav&gt;li&gt;a
          {
          color:#e6e6e6;
          font-size:11px;
          padding-top:22px;
          }
  
          .navbar-default .navbar-nav&gt;li&gt;a:hover, .navbar-default .navbar-nav&gt;.active&gt;a, .navbar-default .navbar-nav&gt;.active&gt;a:focus, .navbar-default .navbar-nav&gt;.active&gt;a:hover {
          color:#f9f9f9;
          background:#2f2b2e;
          border-bottom:2px solid #bfff51;
          font-size:11px;
          }
  
          .navbar-default .navbar-nav&gt;.open&gt;a, .navbar-default .navbar-nav&gt;.open&gt;a:focus, .navbar-default .navbar-nav&gt;.open&gt;a:hover{
          color:#f9f9f9;
          background:#2f2b2e;
          border-bottom:2px solid #bfff51;
          font-size:11px;
          }
  
          .dropdown-menu&gt;li&gt;a {
          display: block;
          padding: 3px 20px;
          clear: both;
          font-weight: 400;
          line-height: 1.42857143;
          color: #fefefe;
          white-space: nowrap;
          background:#4c4649;
          font-size:11px;
          }
  
          .dropdown-menu {
          position:absolute;
          padding:0px;
          border-radius:0px;
          border:0px;
          min-width:0;
          background:red;font-size:11px;
  
          }
  
          .wrapper {
          }
  
          .homepage-welcome {
          font-family:Lobster;
          font-size:2em;
          color:#fefefe;}
  
          .homepage-title{
          font-family:'Open Sans';
          font-size:3em;
          color:#fefefe;}
          }
  
          &lt;/style&gt;
  
          &lt;script&gt;
          $(document).ready(function () {
              //$(".nav li").removeClass("active");
              $('.menu-item-home').addClass('active');
              //for demo
              //$('#demo').addClass('active');
              //for sale 
              //$('#sale').addClass('active');
              $('.dropdown-menu input').click(function(e) {
                  e.stopPropagation();
              });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="wrapper"&gt;
              &lt;nav class="navbar navbar-default" style="border-radius:0px;background:none;border:0px;"&gt;
                  &lt;div class="container-fluid" style=""&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="navbar-header"&gt;
                              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; Menu &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
                              &lt;/button&gt;
                              &lt;a title "Matt's portfolio - go to homepage" style="margin-left:20px;margin-top:2px;" class="navbar-brand page-scroll" href="#"&gt;&lt;img alt="Matt's portfolio logo" src="images/wm-logo.png" /&gt;&lt;/a&gt;
                          &lt;/div&gt;
  
                          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                              &lt;ul class="nav navbar-nav navbar-right" style="text-transform:uppercase;margin-right:20px;"&gt;
                                  &lt;li class="menu-item-home"&gt;
                                      &lt;a href="/home"&gt;Home&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="dropdown"&gt;
                                      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Projects &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                        &lt;li&gt;&lt;a href="/projects/graphics"&gt;Graphics&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="/projects/websites"&gt;Websites&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="/projects/others"&gt;Others&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="/about"&gt;About&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="/contact"&gt;Contact&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-8 col-lg-offset-2 text-center"&gt;
                          &lt;h3 class="homepage-welcome"&gt;My name is Matt and this is my portfolio. &lt;/h3&gt;
                      &lt;h1 class="homepage-title"&gt;I make the Internet a better place.&lt;/h1&gt;
                      &lt;p&gt;Passionate about People. Targeted on feelings and relationships. &lt;br /&gt;Charmed by modern, frontend technologies.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;          
          &lt;/div&gt;
      &lt;/div&gt;      
  &lt;/body&gt;
  </code></pre>
  
  <p></p>