addClass is removed from button when clicking inside Dropdown menu

Question

The button that activates the dropdown uses click rather than hover, on click, I've used jquery to add class, and to remove the class when clicked outside the button I used $(document).click. The problem is, when I click inside the dropdown menu, the class gets removed (Which will obviously happen)

Is there anyway to make an exception for the dropdown div or is there any fix I can use to solve the issue.

$(document).ready(function(){

 $(".menu1TextContainer").click(function(event){

     $(".menu1Container").toggleClass("addclass")
     event.preventDefault();

 });

$(document).click(function(event) {
      if(!$(event.target).is(".menu1TextContainer")){
        $(".menu1Container").removeClass("addclass"); //make all inactive
      }
    });

});

https://jsfiddle.net/9j3k61rg/3/

Thanks!

Can you try this solution? http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Pascal Goldbach, Sep 07 '16 at 08:47

score 1 · Answer 1 · answered Sep 07 '16 at 08:50

You can choose not to do removeClass by checking the clicked element's id.

You can check it like this -

if (event.target.id != "menu1Dropdown") {
           $(".menu1Container").removeClass("addclass"); //make all inactive
         }

Full working snippet below.

 $(document).ready(function() {

   $(".menu1TextContainer").click(function(event) {
     $(".menu1Container").addClass("addclass")
     event.preventDefault();
   });

   $(document).click(function(event) {
     if (event.target.id != "menu1Dropdown") {
       $(".menu1Container").removeClass("addclass"); //make all inactive
     }
   });

 });

 $(function() {

   // Dropdown toggle
   $('.menu1Container').click(function() {
     $(this).next('#menu1Dropdown').slideToggle(100);
   });

   $(document).click(function(e) {
     var target = e.target;
     if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
       $('#menu1Dropdown').slideUp(100);
     }
   });

 });

 $(function() {

   // Dropdown toggle
   $('.menu2Container').click(function() {
     $(this).next('#menu2Dropdown').slideToggle(100);
   });

   $(document).click(function(e) {
     var target = e.target;
     if (!$(target).is('.menu2') && !$(target).parents().is('.menu2')) {
       $('#menu2Dropdown').slideUp(100);
     }
   });

 });

/* Menu 1 */

.menu1 {
  position: absolute;
  left: 67px;
  top: 43px;
  height: 40px;
  width: 99px;
  cursor: pointer;
}

.menu1Container {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 40px;
  width: 99px;
  background-color: yellow;
}

.menu1TextContainer {
  position: absolute;
  top: -13px;
  left: 0px;
  height: 40px;
  width: 99px;
  text-align: center;
  line-height: 40px;
  color: white;
  font-family: montserrat;
  font-size: 13px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}


/* Menu 1 Drop Down */

#menu1Dropdown {
  position: fixed;
  top: 83px;
  right: 0px;
  width: 100%;
  height: 200px;
  background-color: #333333;
  display: none;
}


/* Menu 1 Drop Down End */

.addclass {
  background-color: #333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu1">

  <div class="menu1Container">
    <p class="menu1TextContainer" id="btn">BUTTON1</p>
  </div>

  <div id="menu1Dropdown">

  </div>

</div>

score 1 · Accepted Answer · answered Sep 07 '16 at 09:00

You just simply need to skip class adding/removing when your dropdown is open. I have made a working code for you:

I updated your snippet, see here: https://jsfiddle.net/9j3k61rg/4/

$(document).click(function(event) {
if (!$(event.target).is(".menu1TextContainer") && !$(event.target).is("#menu1Dropdown")) {
         $(".menu1Container").removeClass("addclass"); //make all inactive
     }
        });

});

score 0 · Answer 3 · answered Sep 07 '16 at 08:50

try by changing below code

$(document).click(function (event) {
            if (!$(event.target).is(".menu1TextContainer") && (!$(event.target).is("#menu1Dropdown"))) {
                $(".menu1Container").removeClass("addclass"); //make all inactive
            }
        });

score 0 · Answer 4 · answered Sep 07 '16 at 08:52

You can skip removing "addclass" when dropdown is clicked.

$(document).click(function(event) {
     if (!$(event.target).is(".menu1TextContainer") && !$(event.target).is("#menu1Dropdown")) {
         $(".menu1Container").removeClass("addclass"); //make all inactive
     }
 });

score 0 · Answer 5 · answered Sep 07 '16 at 08:57

Try to replace your JS with:

$(document).ready(function(){

     $(".menu1TextContainer").click(function(event){

         $(".menu1Container").toggleClass("addclass")
         event.preventDefault();

     });

 $("*:not(.menu1Container)").click(function(event) {

            $(".menu1Container").removeClass("addclass"); //make all inactive

        });

});

I hope that's the desired effect..

score 0 · Answer 6 · answered Sep 07 '16 at 09:13

my solution is different from one of "@herrsiim". The reason is event bubbling up => my solution is preventing bubbling:

At line 32 of javascript, when you are sliding your dropdown, change from:

$(this).next('#menu1Dropdown').slideToggle(100);

to:

$(this).next('#menu1Dropdown').slideToggle(100).click(function(event){
    event.stopPropagation();
  });

That is the same effect of "@herrsiim"

score 0 · Answer 7 · answered Sep 07 '16 at 09:21

This can work for you.
What this does actually is that it removes 'addclass' if dropdown is opened.

$(document).click(function(event) {
if (!$(event.target).is(".menu1TextContainer") && !$(event.target).is("#menu1Dropdown")) {
         $(".menu1Container").removeClass("addclass"); //make all inactive
     }
        });

});

I hope I helped. If something is not clear enough please feel free to ask.

addClass is removed from button when clicking inside Dropdown menu

7 Answers7