title: Keep Bootstrap Dropdown Open When Clicked Inside
body: <p>I have a bootstrap dropdown menu. I want it to be <em>kept open when I click inside it</em>, but closed when clicking the dropdown toggle button or outside of the menu.</p>
  <p>It seems like the dropdown does not close when I type something in the <code>input</code> but it closes when I click anywhere else inside the dropdown.</p>
  <p><strong>Q:</strong> How can I avoid this by using jQuery?</p>
  <p>Below is my <strong>HTML</strong>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;navbar&quot;&gt;
    &lt;nav class=&quot;navbar navbar-default navbar-static-top&quot; role=&quot;navigation&quot;&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbar-collapse-1&quot;&gt;
        &lt;ul class=&quot;nav navbar-nav&quot;&gt;
          &lt;li class=&quot;dropdown&quot;&gt;
            &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;MENU&lt;/a&gt; 
            &lt;div class=&quot;dropdown-menu&quot;&gt;
              &lt;p&gt;HELLO&lt;/p&gt;
              &lt;input&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  <h3><a href="https://www.bootply.com/dlVkCbKony" rel="nofollow noreferrer">Demo in Bootply</a></h3>