Keeping the dropdown open after selecting dropdown element

Question

The dropdown menu which is being used is of bootstrap. The code is as below

<li id="changethis" class="dropdown">
 <a  href="#" class="dropdown-toggle" data-toggle="dropdown">LINK</a>
  <ul class="dropdown-menu">
   <li id="clickme"><a href="#">Link1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
  </ul>
 </a>
<li>

Jquery code looks like this

$(document).ready(function () {
 $('#clickme').on('click', function () {
    $('#changethis').removeClass('dropdown');
    $(this).addClass('dropdown open');
 });
});

On click of Link1, I wish to change the li class to dropdown open. I am not getting any error in my console, but the dropdown class is not changed.

Bootply Link

works fine here: http://jsfiddle.net/n9xLsbby/ and here: http://www.bootply.com/9qgMp29vjK — Joel Almeida, May 14 '15 at 12:20
Check out [event.stopPropagation()](https://api.jquery.com/event.stoppropagation/). That should be all you need. This will keep the link's parents from being notified of the event, thus keeping the dropdown open. You don't need to remove or add classes. Just remember to pass `event` into your function (You can name it whatever you want). — Jack, May 14 '15 at 12:32

score 2 · Answer 1 · edited May 23 '17 at 11:58

As Jack pointed out, you should be able to handle the click on your list item and prevent it from bubbling up with event.stopPropagation() like this:

$('#clickme').click(function (e) {
  e.stopPropagation()
});

Demo in Stack Snippets:

$('#clickme').click(function (e) {
  e.stopPropagation()
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div id="changethis" class="dropdown">
  
  <a  href="#" class="dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </a> 

  <ul class="dropdown-menu">
    <li id="clickme"><a href="#">Link1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>

</div>

Further Reading:

You can also check out my answer to Keep Bootstrap Dropdown Open When Clicked Off

Keeping the dropdown open after selecting dropdown element

Bootply Link

1 Answers1

Linked