Jquery Drop Down Menu Closing by Clicking Outside

jQuery drop down menu closing by clicking outside

You can tell any click that bubbles all the way up the DOM to hide the dropdown, and any click that makes it to the parent of the dropdown to stop bubbling.

/* Anything that gets to the document
   will hide the dropdown */
$(document).click(function(){
  $("#dropdown").hide();
});

/* Clicks within the dropdown won't make
   it past the dropdown itself */
$("#dropdown").click(function(e){
  e.stopPropagation();
});

Demo: http://jsbin.com/umubad/2/edit

Close Dropdown Menu when clicking outside

You can use onBlur(). But in order to do that you need to add tabindex="0" to the invoking element i.e the element which is invoking dropdown to display.

const dropdown = document.querySelector('.dropdown');
const dropdownWindow = document.querySelector('.dropdown__window')

dropdown.addEventListener('click', (event) => {
  dropdownWindow.classList.toggle('dropdown__window--active');
});

dropdown.addEventListener('blur', (event) => {
  dropdownWindow.classList.remove('dropdown__window--active');
});

.dropdown {
  position: relative;
  cursor: pointer;
  user-select: none;
  max-width: 260px;
}

.dropdown__window {
  position: absolute;
  background: #ccc;
  box-shadow: 0 10px 40px #1d2021;
  width: 100%;
  max-width: 260px;
  top: 45px;
  z-index: 12;
  overflow: hidden;
  display: none;
  visibility: hidden;
}

.dropdown__window--active {
  display: block;
  visibility: visible;
}

.dropdown__window>* {
  font-size: 14px;
  cursor: pointer;
  display: block;
  padding: 1rem 0 1rem 1rem;
  font-weight: 400;
  text-align: left;
  line-height: 1.42857143;
  color: #fff;
  white-space: nowrap;
}

<div class="dropdown dropdown__open" tabindex="0">
  Open Dropdown

  <div class="dropdown__window">
    <a class="dropdown__link">Link Text</a>
    <a class="dropdown__link">Link Text</a>
    <a class="dropdown__link">Link Text</a>
    <a class="dropdown__link">Link Text</a>
  </div>
</div>

Closing dropdown by clicking outside in Javascript (tutorial clarification)

The issue lies in shareVis function. Here

document.getElementById("mySharedown").className = "show";

you are replacing #mySharedown class name to show. Then in window.onclick

var sharedowns = document.getElementsByClassName("sharedown-content");

you are not getting any sharedowns as you already replaced the class name to show.

---

You can either add show class into classList

document.getElementById("mySharedown").classList.add("show");

or replace the class name with sharedown-content show

document.getElementById("mySharedown").className = "sharedown-content show";

Working solution below:

function shareVis() {    //document.getElementById("mySharedown").className = "sharedown-content show";    document.getElementById("mySharedown").classList.add("show");}
window.onclick = function(event) {    if (!event.target.matches('.sharebtn')) {
        var sharedowns = document.getElementsByClassName("sharedown-content");        var i;        for (i = 0; i < sharedowns.length; i++) {            var openSharedown = sharedowns[i];            if (openSharedown.classList.contains('show')) {                openSharedown.classList.remove('show');            }        }    }}
document.getElementById("mySharedown").addEventListener('click',function(event){    event.stopPropagation();});

#mySharedown{  display: none;  border: 1px solid black;}
#mySharedown.show {  display: block;}

<div class="sharedown">         <p onclick="shareVis()" class="sharebtn">  Share</p>    <div id="mySharedown" class="sharedown-content">        <a href="#">Self</a>        <p>User</p><input type="text" name="user-name" placeholder="Share to">        <a href="#">Community</a>    </div> </div>

Avoid dropdown close on clicking outside

Bootstrap 4 Dropdown eventing is slightly different than Bootstrap 3, therefore the suggested duplicates (and here) will not work to prevent the dropdown from closing on an outside click.

For Bootstrap 4, look for the clickEvent, and when found in the hide event, prevent the default close behavior. This dropdown will only close when the button is clicked.

$('#myDD').on('hide.bs.dropdown', function (e) {
    if (e.clickEvent) {
      e.preventDefault();
    }
})

Demo

---

In some cases, you may want the Dropdown to close when the button or menu is clicked. In this case you can examine the clickEvent target. For example, look for the 'nav-link' class.

$('#myDD').on('hide.bs.dropdown', function (e) {
    if (e.clickEvent && e.clickEvent.target.className!="nav-link") {
      e.preventDefault();
    }
});

Demo 2

How to hide a drop-down menu if i click outside?

Use document click and hide the dropdown. Just add condition for your element so that it wont fire on your element click

   $(document).click(function(event){
 if (!event) { var event = window.event; }

      var S = event.srcElement ? event.srcElement : event.target;
      If(($(S).attr('id')!='dropDownMenu')||$(S).hasClass('option')==false)
     { 
      $('#dropDownMenu').hide();
      }
       })

How to close dropdown menu when clicking outside the menu container?

You might need to adjust how you select the right elements with jQuery, but in essence something like this should work:

function toggleMenu(){
    if($('.btn-link').hasClass('ed-opts-open')){
       $('.btn-link').removeClass('ed-opts-open'); 
    }else{
       $('.btn-link').addClass('ed-opts-open'); 
       $('.ed-opts').focus();
    }
}

$('.btn-link').on('click',toggleMenu)
$('.ed-opts').on('blur',toggleMenu)

---

Related Topics