Avoid Having to Double-Click to Toggle Bootstrap Dropdown

Avoid having to double-click to toggle Bootstrap dropdown

If someone is using angular with ui-bootstrap module along with normal bootstrap HTML dropdown definition, there are also two clicks needed.

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   [...]
</li>

=> Removing the data-toggle="dropdown" will fix the issue.

Opening the dropdown with one click will work after this.

Reference:
https://github.com/angular-ui/bootstrap/issues/2294

Bootstrap4 dropdown only works in the second click

you need to use the toggle like that and assign the data-target to the drop down menu with it's id

using

data-target="#navbarDropdown"

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

and then assign that id to the menu

        <li class="nav-item dropdown show">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
            <div id="navbarDropdown" class="dropdown-menu"  role="menu" aria-labelledby="navbarDropdown">
             <a class="dropdown-item">Link 1</a>
             <a class="dropdown-item">Link 2</a>
            </div>
        </li>

Remove double-click on dropdown link

The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.

You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:

(Run code snippet)

There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.

var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {  this.classList.toggle("active");   var dropdownContent = this.nextElementSibling;   if (dropdownContent.style.display == "block") {      dropdownContent.style.display = "none";   } else {      dropdownContent.style.display= "block";   }});

#content {  margin: 1.875em 0px 0.625em 0px;  width: auto;  background-color: #002f6c;  border-radius: 0.75em;  -webkit-border-radius: 0.75em;  -moz-border-radius: 0.75em;  display: inline-block;  overflow: hidden; top: 9.375em;}
.quick {    margin: 0;    padding: 0;    display: block;    overflow: hidden;    font-family: sans-serif;}
.quick a {    display: block;    height: auto;    padding-top: 0.625em;    padding-bottom: 0.625em;    font-family: sans-serif;    font-size: calc(0.5vw + 0.5vh + 0.5vmin);    text-align: center;    text-decoration: none;    background-color: #888B8D;}
.quick a:hover {    display: block;    width: auto;    height: auto;    color: #002F6C;    background-color: #FFD300;}
.topvert {  width: auto;  margin: 0 auto;  display: block;  overflow: hidden;}
.btmvert { width: auto;  margin: 0 auto;  display: block;  overflow: hidden;}
.btmverthome { width: auto;  margin: 0 auto;  display: block;  overflow: hidden;}
.vertheader { width: auto;  padding: 2%;  display: block;  text-align: center;}
.vertbtn { width: auto;  cursor: pointer;  display: block;}
.vertbtn :hover {  background-color: #FFD300;  position: relative;  display: block;}
a.backhome {  font-family: sans-serif; font-size: calc(0.5vw + 0.5vh + 0.5vmin); font-weight: 600; color: #fff; text-align: center; padding: 2%;  box-sizing: border-box;}
a.backhome:hover { color: #002f6c; background-color: #FFD300; position: relative; display: block;}
.quicklinks {  color: #fff;  font-family: sans-serif;  font-size: calc(0.5vw + 0.5vh + 0.5vmin);  font-weight: 600;}
.drop-button {  padding-top: 0.625em;  padding-bottom: 0.625em;  text-decoration: none;  font-family: sans-serif;  font-size: calc(0.5vw + 0.5vh + 0.5vmin);  color: #fff;  display: block;  border: none;  background-color: #888B8D;  width: 100%;  text-align: center;  cursor: pointer;  outline: none;}
/* On mouse-over */.drop-button:hover {  color: #002f6c;  background-color: #FFD300;}

.main {  margin-left: 200px;  font-size: 20px;  padding: 0px 10px;}

.active {  background-color: #06a7e0;  color: white;}
.dropdown-container {  display: none;  background-color: #b4e4f5;  border-bottom: solid 2px #06a7e0;}
.dropdown-container > a { background-color: #50c1e9; border-bottom: solid 1px #06a7e0;}
a {     display: block;    position: relative;    color: #f3f3f3;    text-decoration: none;  }  a:hover {     color: #fff;    position: relative;  }

<div id="content">  <div class="topvert">   <div class="vertheader">    <span class="quicklinks">QUICK MENU LIST</span>   </div>     <div class="vertbtn">    <div class="quick">     <a href="#">Menu Item</a>   </div>   <div class="quick">     <div class="drop-button active"><div>Drop down Menu Item     </div></div>      <div class="dropdown-container" style="display: block;">       <a href="#">Menu Item</a>      </div>   </div>  </div>    </div>   <div class="btmvert">   <div class="vertheader">    <span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>   </div>     <div class="vertbtn">      <div class="quick">     <a href="#">Menu Item</a>   </div>   <div class="vertbtn">     <a class="backhome" href="#">Back to Home Page</a>   </div>      </div>    </div>  </div>

dropdown of Navbar is double-clicked.

The short answer:

You should not be using the bootstrap.js with the angular-ui-bootstrap.js library. Both libraries are working to display/hide the dropdown on the click event.

The long answer:

The dropdown-menu class sets the display attribute to none. The boostrap.js library attaches a click event to elements with a data-toggle="dropdown" attribute. The click event then checks to see if the parent element has an open class. If the open class exists, remove it, otherwise add the open class. The 'open' class sets the css display attribute to block on child elements with a class of dropdown-menu thus overriding the original value of none.

The angular-ui-bootstrap.js library is also adding/remove the open class on the toggle click event in the same manner. So one library adds the open class, the other library promptly removes it, thus resulting in the original css display attribute of none in the dropdown-menu class.

UI bootstrap dropdown toggle needs to be clicked twice if closed manually

Manually changing classes is not how you open/close a uib-dropdown why are you doing it that way? The docs clearly show the is-open attribute for hiding/showing the dropdown:

Markup:

<div uib-dropdown id="calendar1" is-open="dropdownOpen">
  <h4>
    <a uib-dropdown-toggle href="">Select Date <b class="caret"></b>
    </a>
  </h4>
  <ul uib-dropdown-menu>
    <datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }">

    </datetimepicker>
  </ul>
</div>

Script:

  $scope.$watch('date',function(newValue){
    //angular.element(document.getElementById('calendar1')).removeClass('open')
    $scope.dropdownOpen = false;
  });

Plunker: https://plnkr.co/edit/touxnNRmnsefAMScCprC?p=preview

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/

Bootstrap v4: Prevent collapse on double click

Solved

Robert C (thanks!) mentioned my use of different versions of jQuery.

The solution was to use the normal full jQuery package instead of the slim package.

---

Related Topics