CODEWITHSUNDEEP
jqueryhtmlcss
Talis Galhardi
Talis Galhardi

Reputation: 63

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

I have this function in jquery that shows and hide options by toggling the class 'showing'.

    $('#button').click(function(){
       $('#dropDownMenu').find('.option').toggleClass('showing', 500, "easeOutSine");
    });

CSS:

#dropDownMenu .option{
   height: 0px;
}

#dropDownMenu .option.showing{
   height: initial;
   padding: 25px;
}

HTML:

        <button id="button"></button>
        <div id="dropDownMenu">
            <div class="option">OP1</div>
            <div class="option">OP2</div>
            <div class="option">OP3</div>
            <div class="option">OP4</div>
            <div class="option">OP5</div>
        </div>

How do I hide the menu by clicking outside, any other place on the page?

Upvotes: 2

Views: 7624

Answers (4)

Sameer
Sameer

Reputation: 705

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();
      }
       })

Upvotes: 2

Vitali Protosovitski
Vitali Protosovitski

Reputation: 563

$(document).ready(function() {  
  $('.menu > li').click(function() {
    var t = $(this);
    if ( !t.hasClass('active') ) {
      t.addClass('active').next('.submenu').addClass('active');
    } else {
      t.removeClass('active').next('.submenu').removeClass('active');
    }    
  });
  $('html').click(function(event) {
    var e = $(event.target);
    if ( e.parents('.submenu').length < 1 && e.next('.submenu').length < 1 ) {
      $('.submenu').removeClass('active');
    }
  });  
});
.submenu {
  display: none;
}
.submenu.active {
  display: block;
}
.menu > li {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="submenu-link">Menu Item</li>
  <ul class="submenu">
    <li>SubMenu Item</li>
  </ul>
</ul>

Close dropdown if targeted event hasn't parent class 'submenu'

Upvotes: 1

jafarbtech
jafarbtech

Reputation: 7015

Add $('body').click(function(e) { to handle the clicks in the whole document body

$('body').click(function(e) {
   if($('#dropDownMenu').find('.option').hasClass('showing')) {
     if (e.target == $('#button')[0] || e.target == $('#dropDownMenu')[0]) e.preventDefault();
     else
       $('#dropDownMenu').find('.option').removeClass('showing', 500, "easeOutSine");
   }
 });

 $('#button').click(function(e) {
   e.preventDefault();
   $('#dropDownMenu').find('.option').toggleClass('showing', 500, "easeOutSine");
 });
#dropDownMenu .option {
  height: 0px;
  display:none;
}
#dropDownMenu .option.showing {
  height: initial;
  display:block;
  padding: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">menu</button>
<div id="dropDownMenu">
  <div class="option">OP1</div>
  <div class="option">OP2</div>
  <div class="option">OP3</div>
  <div class="option">OP4</div>
  <div class="option">OP5</div>
</div>

Upvotes: 0

Kebeng
Kebeng

Reputation: 485

have you tried using .focusout() event listener?

you can try it like this

$('#button').focusout(function(){
       $('#dropDownMenu').find('.option').removeClass('showing', 500, "easeOutSine");
    });

Upvotes: 2

Related Questions