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? stackoverflow.com/questions/1403615/… — Pascal Goldbach
– Pascal Goldbach, Commented Sep 7, 2016 at 8:47

herrsiim · Accepted Answer · 2016-09-07 09:00:12Z

1

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

});

answered Sep 7, 2016 at 9:00

herrsiim

1471 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sooraj · Accepted Answer · 2016-09-07 08:50:42Z

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>

Rakesh Sojitra · Accepted Answer · 2016-09-07 08:50:28Z

0

try by changing below code

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

answered Sep 7, 2016 at 8:50

Rakesh Sojitra

3,6682 gold badges19 silver badges35 bronze badges

Comments

Rajeswari K · Accepted Answer · 2016-09-07 08:52:28Z

0

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

answered Sep 7, 2016 at 8:52

Rajeswari K

644 bronze badges

Comments

UIPassion · Accepted Answer · 2016-09-07 08:57:35Z

0

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..

answered Sep 7, 2016 at 8:57

UIPassion

1207 bronze badges

Comments

Khoa · Accepted Answer · 2016-09-07 09:13:55Z

0

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"

answered Sep 7, 2016 at 9:13

Khoa

2,9321 gold badge20 silver badges15 bronze badges

Comments

Vladan Grubo Paunovic · Accepted Answer · 2016-09-07 09:21:42Z

0

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.

answered Sep 7, 2016 at 9:21

Vladan Grubo Paunovic

961 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

addClass is removed from button when clicking inside Dropdown menu

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related