cant get my dropdown list to close when I click outside

Question

cant get my dropdown list to close when I click outside the button the function above renders the dropdown button to work completly. The function at the bottom of the page is the on Im trying to get to work at the moment it renders the other function inside the script impossible to use, the work if I remove it. The dropwdown html thats in the code below is just an example.

        //this is how the dropdown looks like got it from //http://www.w3schools.com/w3css/w3css_dropdowns.asp
         <div class="w3-dropdown-click">
           <button onclick="myFunction()" class="w3-btn">ClickMe</button>
            <div id="Demo" class="w3-dropdown-content w3-card">
   /*some example links*/
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
           </div>
         </div>     
    // I use two of these on my page


    <script>          
    //this functions open and closes my dropdown when clicked 
       function myFunction(event) {
     //opens the selected dropdownlist
         document.getElementById("Demo").classList.toggle("w3-show");
     //closes the other dropdownlist
          document.getElementById("Demo2").classList.remove("w3-show");
          event.stopPropagation();
       }

          //this functions open and closes my other dropdown when clicked 
      function myFunction2(event) {
                 //opens the selected dropdownlist
         document.getElementById("Demo2").classList.toggle("w3-show");
                 //closes the other dropdownlist
         document.getElementById("Demo").classList.remove("w3-show");
         event.stopPropagation();
       }

    // the funtion im trying to get to work it should close the dropdown when Im clicking outsid of the dropdown buttons 
             $(":not(#Demo2)").click( function(){
               document.getElementById("Demo").classList.remove("w3-show");
               document.getElementById("Demo2").classList.remove("w3-show");
              });
              </script>

This may help you http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element?rq=1 — Castillo, Jan 08 '16 at 14:12
As stated above, you could add a click listener and check if your list was clicked or not, if not you can toggle your menu. — c00ki3s, Jan 08 '16 at 14:13
I think the issue is dont know what div I should select on the w3-dropdown from //http://www.w3schools.com/w3css/w3css_dropdowns.asp the event.stopPropagation(); wont matter in this case I think — Eriksson90, Jan 08 '16 at 14:29

score 0 · Answer 1 · answered Jan 08 '16 at 14:35

Let's try this approach, shall we.

Construct your HTML to perform the click even client side. Use IDs to program your storing procedures

HTML

<div class="top40">
    <button type="button" class="btn" data-toggle="collapse" data-target="#demo">
        Collapse Button
    </button>
    <ul id="demo"  class="collapse">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
</div>

CSS

.top40{
    margin-top:40px;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.collapse {
    display: none;
}
.collapse.in {
    display: block;
}

JQUERY <-- I'm assuming you are referencing JQuery in your document

$(document).on('click',function(){
    $('.collapse').toggleClass('in');
})

Anywhere you click on your document will trigger the click event and toggle the in class which will hide and show accordingly on +1 click

Here is a working DEMO

score 0 · Answer 2 · answered May 31 '19 at 01:43

window.addEventListener('mouseup',function(event){
        var pol = document.getElementById('Demo1');
        if(event.target != pol && event.target.parentNode != pol){
            document.getElementById("Demo").classList.remove("w3-show");
            document.getElementById("Demo2").classList.remove("w3-show");
          
        }
  });

cant get my dropdown list to close when I click outside

2 Answers2