How to close the menu when you click outside it and when you click on the hamburger again?

Question

Clicking on the button opens a menu. When you click outside the menu, it closes. When you click on the button, the hamburger menu should also be closed if it is open. But I get to re-open the menu immediately after closing, and it does not close. How to make a close when clicking outside the menu, as well as when clicking on a button, if the menu is open?

$(".menu_btn").click(function() { if (!$("header").hasClass("open_menu")) { $("header").addClass("open_menu"); } }); $(document).mouseup(function(e) { var $target = $(e.target); if ($target.closest("nav").length === 0) { $("header").removeClass("open_menu"); } });

Accepted Answer · 2016-11-10T11:40:37

 $(".menu_btn").click(function() { $(".header").toggleClass("open_menu"); }); $(document).mouseup(function(e) { var $target = $(e.target); if ($target.closest(".nav").length == 0) { $(".header").removeClass("open_menu"); } });

 .nav{ width:250px; } .header{ display:none; } .open_menu{ display:block; border:2px solid red; background:#ccc; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='nav'> <button class='menu_btn'>Click me</button> <ul class='header'> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> </ul> </div>

UPD

 $(".menu_btn").click(function() { $(".header").toggleClass("open_menu"); }); $(document).mouseup(function(e) { var $target = $(e.target); if ($target.closest(".header").length == 0 && $target.closest(".menu_btn").length == 0) { $(".header").removeClass("open_menu"); } });

 .header { display: none; } .open_menu { display: block; border: 2px solid red; background: #ccc; width: 250px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class='menu_btn'>Click me</button> <ul class='header'> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> <li>1111111111111111111111</li> </ul>

Do not tell me why the block closes when you click on the left / right / bottom, but not on top?
@VictorPavlov, because the button and the opening block are in the block ('nav');
@Alla in the framework of the local forum is not realistic ... but I would advise you to understand the functions and generally to understand jQuery, for the most part, refer to the original source jquery.com there is a fairly full description and examples.

tCode tCode 2.497 2 13 36 · Answer 2 · 2016-11-10T11:33:16

Use toggleClass

 $(".menu_btn").click(function() { if (!$("header").hasClass("open_menu")) { $("header").toggleClass("open_menu"); } }); $(document).mouseup(function(e) { var $target = $(e.target); if ($target.closest("nav").length === 0) { $("header").toggleClass("open_menu"); } });

If the menu is open and click on the hamburger, the menu does not close.

How to close the menu when you click outside it and when you click on the hamburger again?

2 answers 2

More articles: