Keep Bootstrap Dropdown Open When Clicked Inside

Question

I have a bootstrap dropdown menu. I want it to be kept open when I click inside it, but closed when clicking the dropdown toggle button or outside of the menu.

It seems like the dropdown does not close when I type something in the input but it closes when I click anywhere else inside the dropdown.

Q: How can I avoid this by using jQuery?

Below is my HTML:

<div id="navbar">
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a> 
          <div class="dropdown-menu">
            <p>HELLO</p>
            <input>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

Demo in Bootply

The answer should be found here: https://stackoverflow.com/questions/25089297/twitter-bootstrap-avoid-dropdown-menu-close-on-click-inside — , Jun 20 '17 at 07:32

Rohit Sharma · Accepted Answer · 2019-07-10T05:00:22.557

8

You can use the following JavaScript to manually open and close the dropdown menu:

$(function() {

  $('.dropdown-toggle').on('click', function(event) {
    $('.dropdown-menu').slideToggle();
    event.stopPropagation();
  });

  $('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
  });

  $(window).on('click', function() {
    $('.dropdown-menu').slideUp();
  });

});

Demo in StackSnippets

$(function() {

  $('.dropdown-toggle').on('click', function(event) {
    $('.dropdown-menu').slideToggle();
    event.stopPropagation();
  });

  $('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
  });

  $(window).on('click', function() {
    $('.dropdown-menu').slideUp();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="navbar">
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a>
        <div class="dropdown-menu">
          <p>Hello</p>
          <input type="text">
        </div>
      </li>
    </ul>
  </nav>
</div>

edited Jul 10 '19 at 05:00

answered Jun 20 '17 at 07:46

Rohit Sharma

3,304
2
19
34

1

I have a problem with this one. When I click on other links and try to click menu again, the sub dropdown does not show anymore. How do I fix it? – H.Kim Jun 21 '17 at 23:24
@H.Kim Can you please post your code by editing your question again. So that I can guess what is going to be wrong..? – Rohit Sharma Jun 22 '17 at 05:30
so for example, when I click on other link and I am directed to another page, I can no longer open the `menu` I'm using ruby on rails at the moment – H.Kim Jun 22 '17 at 07:39
Are you using this script on all pages on which you want to achieve this effect..? – Rohit Sharma Jun 22 '17 at 07:45
I think so. I put the javascript code into `application.js` file and it should affect all pages. my other links look like this: `
<%=link_to( image_tag("menu2.png"), root_url) %>

H.Kim

Jun 22 '17 at 08:02

Becuase I have no idea about ruby on rails so I would suggest you to use this code on all pages.....! It will works properly..! – Rohit Sharma Jun 22 '17 at 08:07

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/147342/discussion-between-rohit-sharma-and-h-kim). – Rohit Sharma Jun 22 '17 at 08:16

score 5 · Answer 2 · edited Jun 20 '20 at 09:12

From the question Avoid dropdown menu close on click inside, you can simply stop propagation from inside the dropdown like this:

$(document).on('click', '.allow-focus .dropdown-menu', function (e) {
  e.stopPropagation();
});

Demo in Stack Snipets

$(document).on('click', '.allow-focus .dropdown-menu', function (e) {
  e.stopPropagation();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>


<div class="dropdown allow-focus">
  <button id="dropdownLabel" type="button" class="btn btn-default"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu panel" aria-labelledby="dropdownLabel">
    <div class="col-xs-12">
      What's Your Name?
      <input type="text" placeholder="Name" class="form-control" />
    </div>
  </div>
</div>

NOTE: To solve the opposite problem (of keeping open until clicked), you can refer to:

Keep Bootstrap Dropdown Open When Clicked Off

Keep Bootstrap Dropdown Open When Clicked Inside

Demo in Bootply

2 Answers2

Demo in StackSnippets

Demo in Stack Snipets

Linked