Disable the user being able to click on a li element

Question

I am using bootstrap and am trying to disable an li so when the user clicks on one of the li elements in the dropdown nothing happens. Currently when I click on the top li element the dropdown closes. I want it to stay open. Most of the resources I have found have been about disabling links. I want to create a drop down similar to the one on Facebook.

Here is my html

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li id="test"><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

here is my css

#test{
  background-color:red;
  pointer-events: none;
}

and here is a link to jsfiddle.

https://jsfiddle.net/aaronmk2/DTcHh/67643/

Possible duplicate of [Avoid dropdown menu close on click inside](https://stackoverflow.com/questions/25089297/avoid-dropdown-menu-close-on-click-inside) — APAD1, May 10 '18 at 18:42

score 1 · Accepted Answer · answered May 10 '18 at 18:53

1

Based on the single requirement of keeping the dropdown open when you click an li, the code below will work. Simply stop the event propagation:

$(".dropdown-menu li").click(function(e) {
  e.stopPropagation();
});

Here's a working fiddle.

answered May 10 '18 at 18:53

James Hill

60,353
20
145
161

score 0 · Answer 2 · answered May 10 '18 at 18:58

Remove the data-toggle property from your button and use the following JS to solve your problem:

$('.dropdown-toggle').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

$('body').on('click', function (e) {
    if (!$('.dropdown-toggle').is(e.target) 
        && $('.dropdown-toggle').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('.dropdown-toggle').removeClass('open');
    }
});

Fiddle: https://jsfiddle.net/DTcHh/67653/

Disable the user being able to click on a li element

2 Answers2