Stop Just One Dropdown Toggle from Closing on Click

Stop just one dropdown toggle from closing on click

The issue is that the boostrap dropdown jQuery plugin closes the dropped-menu when you click anywhere else. You can disable that behavior by capturing the click events on your dropdown-menu element and keeping it from reaching the click event listeners on the body element.

Just add

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

jsfiddle can be found here

Prevent dropdown from closing if click is happening inside the dropdown menu

I updated your HTML file (see below) so that the event.stopPropagation() method is called directly once the user clicks on the dropdown. Seems to be working, I found the answer here: How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)

The openDropdown() method can be removed from the ts file. Hope this helps!

<div class="container">  <div>    <div class="btn-group" dropdown>      <div  dropdownToggle id="pencilColorPicker">          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png">       </div>
      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()"          role="menu" aria-labelledby="button-basic">        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>            </ul>    </div>  </div>
  <div>    <div class="btn-group" dropdown>      <div  dropdownToggle id="pencilColorPicker">          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png">       </div>
      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()"          role="menu" aria-labelledby="button-basic">        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>            </ul>    </div>  </div>
</div>

How do I prevent my dropdown from closing when clicking inside it?

'.dropdown-menu' catches the the bubble. There is no need to catch elements inside of the dropdown in this case.

e.stopPropagation() prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

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

Prevent Bootstrap dropdown from closing on clicks

You need to stop event from bubbling up the DOM tree:

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

event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.

Demo: http://jsfiddle.net/wkc5md23/3/

fix the code to prevent dropdown menu from closing when on click

After making the modifications suggested by @Heretic Monkey and @Ganesh chaitanya, you can simplify your code by using map() instead of a for loop, and again classList.toggle() instead of else if.
just modify your css a little with a new class that you add to your div. Like that

    var dropdown = document.getElementsByClassName("dropdown-btn");    // here dropdown.map() don't work, use     Array.prototype.map.call(dropdown, function(drop) {      drop.addEventListener("click", function() {        drop.classList.toggle("active");        var dropdownContent = drop.nextElementSibling;        //use classList.toggle with the new class added at the div        dropdownContent.classList.toggle("disp-container");      });    });

nav.side-nav li:not(:first-child):hover {      background: #cda600;      color: white;      cursor: pointer;    }        /*dropdown menu*/        /*remove display here*/    .dropdown-container {      background-color: #ffffff;      padding-left: 8px;    }    /*create a new class and add display here*/    .disp-container {      display: none;    }

        <nav class="side-nav">          <ul>            <li style="text-align:left;">some1</li>            <li href="#">some1</li>            <li href="#">some1</li>            <li href="#">some1</li>                <li id="navDrop" class="dropdown-btn">              <a href="#">Menu</a>            </li>            <!-- add your new class here -->            <div class="disp-container dropdown-container">              <form>                <a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br />                <a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br />                <a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br />                <a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>              </form>            </div>            <li id="navDrop2" class="dropdown-btn">              <a href="#">Menu</a>            </li>             <!-- add your new class here -->            <div class="disp-container dropdown-container">              <form>                <a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br />                <a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br />                <a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br />                <a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>              </form>            </div>          </ul>        </nav>

How To Prevent Drop Down Menu From Closing When User Clicks Into It?

On window.onClick handler, we add a condition to exclude "dropdown content" and its children.

/* When the user clicks on the button, toggle between hiding and showing the dropdown content */function myFunction() {    document.getElementById("myDropdown").classList.toggle("show");}
// Close the dropdown menu if the user clicks outside of itwindow.onclick = function(event) {  if (!event.target.matches('.dropbtn')) {    // [BEGIN][Here is the condition]    if (event.target.matches('.dropdown-content') || event.target.matches('.dropdown-content *') ) {       event.stopPropagation();       return;    }  // [END][Here is the condition]    var dropdowns = document.getElementsByClassName("dropdown-content");    var i;    for (i = 0; i < dropdowns.length; i++) {      var openDropdown = dropdowns[i];      if (openDropdown.classList.contains('show')) {        openDropdown.classList.remove('show');      }    }  }}

/* Dropdown Button */.dropbtn {    background-color: #4CAF50;    color: white;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;}
/* Dropdown button on hover & focus */.dropbtn:hover, .dropbtn:focus {    background-color: #3e8e41;}
/* The container <div> - needed to position the dropdown content */.dropdown {    position: relative;    display: inline-block;}
/* Dropdown Content (Hidden by Default) */.dropdown-content {    display: none;    position: absolute;    background-color: #f9f9f9;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
/* Contents inside the dropdown */.dropdown-content input, .dropdown-content button {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block;}
/* Change color of dropdown links on hover */.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */.show {display:block;}

<div class="dropdown">  <button onclick="myFunction()" class="dropbtn">LOG IN</button>  <div id="myDropdown" class="dropdown-content">    <input type="text" name="username" placeholder="Enter username"/>    <input type="text" name="password" placeholder="Enter password"/>    <button type="submit" name="submit">Submit</button>  </div></div>

Stop Just One Dropdown Toggle from Closing on Click