Menus require two clicks to close

Question

I have two quick links menus that are displayed using CSS and jQuery. The links to activate the menus work without issue, but when closing them, the links require two clicks to trigger, if both menus have been activated. Try opening the 'View Quicklinks' menu, then try opening the 'I Want To' menu. You will see the two click issue.

 jQuery(document).ready(function($) { $('.nav-menu-trigger').on('click', function(e) { e.preventDefault; $('.nav-menu-trigger').toggleClass('active'); $('.nav-container').toggleClass('open'); }); var open = false; var openWTMenu = function() { $('.wt-menu .j-menu-open').addClass('active'); $('.wt-menu .j-menu-container').addClass('open'); open = true; } var closeWTMenu = function() { $('.wt-menu .j-menu-open').removeClass('active'); $('.wt-menu .j-menu-container').removeClass('open'); open = false; } var openQLMenu = function() { $('.ql-menu .j-menu-open').addClass('active'); $('.ql-menu .j-menu-container').addClass('open'); open = true; } var closeQLMenu = function() { $('.ql-menu .j-menu-open').removeClass('active'); $('.ql-menu .j-menu-container').removeClass('open'); open = false; } $('.wt-menu .j-menu-open,.wt-menu .j-menu-close').click(function(e) { e.stopPropagation(); var toggle = open ? closeWTMenu : openWTMenu; toggle(); }); $('.ql-menu .j-menu-open,.ql-menu .j-menu-close').click(function(e) { e.stopPropagation(); var toggle = open ? closeQLMenu : openQLMenu; toggle(); }); $(document).click(function(e) { if (!$(e.target).closest('.wt-menu .j-menu-container').length) { closeWTMenu(); } }); $(document).click(function(e) { if (!$(e.target).closest('.ql-menu .j-menu-container').length) { closeQLMenu(); } }); }); 

 .module.j-menu { float: left; margin-right: 10px; position: relative; } .module.j-menu .j-menu-open { display: block; width: 136px; height: 50px; padding: 0 10px; border: none; text-transform: uppercase; text-align: center; font: 300 .722em/1.429em "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; cursor: pointer } .module.wt-menu .j-menu-open, .module.wt-menu .j-menu-hide { background-color: #d9ab28 } .module.ql-menu .j-menu-open, .module.ql-menu .j-menu-hide { background-color: #1d5538 } .module.j-menu .j-menu-container { display: none; width: 336px; height: auto; position: absolute; top: -2px; left: 0; z-index: 103 } .module.j-menu .j-menu-container.open { display: block } .module.wt-menu .j-menu-controls { background-color: #5a5a5b } .module.ql-menu .j-menu-controls { background-color: #ded6b3 } .module.j-menu .j-menu-close { width: 100%; height: 50px; margin: 0; padding: 0 10px; background: transparent; border: none; text-align: center; text-transform: uppercase; font: 300 .722em/1.429em "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; color: #fff } .module.wt-menu .j-menu-close { background-color: #d9ab28 } .module.ql-menu .j-menu-close { background-color: #1d5538 } .module.wt-menu li { border-bottom: 1px solid #656566 } .module.ql-menu li { border-bottom: 1px solid #ccc5a5 } .module.j-menu ul a:link { display: block; width: 100%; padding: 15px 20px; text-transform: uppercase; font: 400 .833em/1 "Helvetica Neue", Helvetica, Arial, sans-serif; } .module.wt-menu ul a:link, .module.wt-menu ul a:visited { color: #ded6b3 } .module.wt-menu ul a:hover, .module.wt-menu ul a:active { color: #d9aa38 } .module.ql-menu ul a:link, .module.ql-menu ul a:visited { color: #757575 } .module.ql-menu ul a:hover, .module.ql-menu ul a:active { color: #d9aa38 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="module j-menu wt-menu"> <button class="j-menu-open"> I Want To... </button> <div class="j-menu-container"> <div class="j-menu-controls"> <button class="j-menu-close"> Close </button> <ul class="nav menu"> <li class="item-639"> <a class=" icon-communities" href="/hamlets" title="Our Communities"> <span>Our Communities</span> </a> </li> <li class="item-644"> <a class=" icon-forsale" href="#" title="Businesses For Sale"> <span>Businesses For Sale</span> </a> </li> <li class="item-640"> <a class=" icon-entrepreneurship" href="#" title="Youth Entrepreneurship"> <span>Youth Entrepreneurship</span> </a> </li> <li class="item-645"> <a class=" icon-approvals" href="#" title="Development Approvals"> <span>Development Approvals</span> </a> </li> <li class="item-641"> <a class=" icon-partnerships" href="#" title="Regional Partnerships"> <span>Regional Partnerships</span> </a> </li> <li class="item-646"> <a class=" icon-publications" href="#" title="Publications"> <span>Publications</span> </a> </li> <li class="item-642"> <a class=" icon-land" href="#" title="Land"> <span>Land</span> </a> </li> <li class="item-647"> <a class=" icon-directory" href="/business/business-directory" title="Business Directory"> <span>Business Directory</span> </a> </li> <li class="item-643"> <a class=" icon-franchise" href="#" title="Franchise Opps"> <span>Franchise Opps</span> </a> </li> <li class="item-648"> <a class=" icon-resources" href="#" title="Resources"> <span>Resources</span> </a> </li> </ul> </div> </div> </div> <div class="module j-menu ql-menu"> <button class="j-menu-open"> View Quicklinks </button> <div class="j-menu-container"> <div class="j-menu-controls"> <button class="j-menu-close"> Close </button> <ul class="nav menu"> <li class="item-639"> <a class=" icon-communities" href="/hamlets" title="Our Communities"> <span>Our Communities</span> </a> </li> <li class="item-644"> <a class=" icon-forsale" href="#" title="Businesses For Sale"> <span>Businesses For Sale</span> </a> </li> <li class="item-640"> <a class=" icon-entrepreneurship" href="#" title="Youth Entrepreneurship"> <span>Youth Entrepreneurship</span> </a> </li> <li class="item-645"> <a class=" icon-approvals" href="#" title="Development Approvals"> <span>Development Approvals</span> </a> </li> <li class="item-641"> <a class=" icon-partnerships" href="#" title="Regional Partnerships"> <span>Regional Partnerships</span> </a> </li> <li class="item-646"> <a class=" icon-publications" href="#" title="Publications"> <span>Publications</span> </a> </li> <li class="item-642"> <a class=" icon-land" href="#" title="Land"> <span>Land</span> </a> </li> <li class="item-647"> <a class=" icon-directory" href="/business/business-directory" title="Business Directory"> <span>Business Directory</span> </a> </li> <li class="item-643"> <a class=" icon-franchise" href="#" title="Franchise Opps"> <span>Franchise Opps</span> </a> </li> <li class="item-648"> <a class=" icon-resources" href="#" title="Resources"> <span>Resources</span> </a> </li> </ul> </div> </div> </div> 

Answer 1

You just need to change/toggle class on module:

 $(document).on('click', function(e) { if( !$('.j-menu-toggle').is(e.target) && $('.j-menu-container').has(e.target).length === 0 ) { $('.j-menu').removeClass('active'); } else { $(e.target).closest('.j-menu').toggleClass('active'); }; }); 

 .j-menu { float: left; margin-right: 10px; position: relative; } .j-menu > .j-menu-toggle { display: block; width: 136px; height: 50px; padding: 0 10px; border: none; text-transform: uppercase; text-align: center; font: 300 .722em/1.429em "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; cursor: pointer } .wt-menu .j-menu-toggle { background-color: #d9ab28 } .ql-menu .j-menu-toggle { background-color: #1d5538 } .j-menu-container { display: none; width: 336px; height: auto; position: absolute; top: -2px; left: 0; z-index: 103 } .active .j-menu-container { display: block } .wt-menu .j-menu-controls { background-color: #5a5a5b } .ql-menu .j-menu-controls { background-color: #ded6b3 } .j-menu-controls > .j-menu-toggle { width: 100%; height: 50px; margin: 0; padding: 0 10px; background: transparent; border: none; text-align: center; text-transform: uppercase; font: 300 .722em/1.429em "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; color: #fff } .wt-menu .j-menu-toggle { background-color: #d9ab28 } .ql-menu .j-menu-toggle { background-color: #1d5538 } .module.wt-menu li { border-bottom: 1px solid #656566 } .module.ql-menu li { border-bottom: 1px solid #ccc5a5 } .module.j-menu ul a:link { display: block; width: 100%; padding: 15px 20px; text-transform: uppercase; font: 400 .833em/1 "Helvetica Neue", Helvetica, Arial, sans-serif; } .module.wt-menu ul a:link, .module.wt-menu ul a:visited { color: #ded6b3 } .module.wt-menu ul a:hover, .module.wt-menu ul a:active { color: #d9aa38 } .module.ql-menu ul a:link, .module.ql-menu ul a:visited { color: #757575 } .module.ql-menu ul a:hover, .module.ql-menu ul a:active { color: #d9aa38 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="module j-menu wt-menu"> <button class="j-menu-toggle"> I Want To... </button> <div class="j-menu-container"> <div class="j-menu-controls"> <button class="j-menu-toggle"> Close </button> <ul class="nav menu"> <li class="item-639"> <a class=" icon-communities" href="/hamlets" title="Our Communities"> <span>Our Communities</span> </a> </li> <li class="item-644"> <a class=" icon-forsale" href="#" title="Businesses For Sale"> <span>Businesses For Sale</span> </a> </li> <li class="item-640"> <a class=" icon-entrepreneurship" href="#" title="Youth Entrepreneurship"> <span>Youth Entrepreneurship</span> </a> </li> <li class="item-645"> <a class=" icon-approvals" href="#" title="Development Approvals"> <span>Development Approvals</span> </a> </li> <li class="item-641"> <a class=" icon-partnerships" href="#" title="Regional Partnerships"> <span>Regional Partnerships</span> </a> </li> <li class="item-646"> <a class=" icon-publications" href="#" title="Publications"> <span>Publications</span> </a> </li> <li class="item-642"> <a class=" icon-land" href="#" title="Land"> <span>Land</span> </a> </li> <li class="item-647"> <a class=" icon-directory" href="/business/business-directory" title="Business Directory"> <span>Business Directory</span> </a> </li> <li class="item-643"> <a class=" icon-franchise" href="#" title="Franchise Opps"> <span>Franchise Opps</span> </a> </li> <li class="item-648"> <a class=" icon-resources" href="#" title="Resources"> <span>Resources</span> </a> </li> </ul> </div> </div> </div> <div class="module j-menu ql-menu"> <button class="j-menu-toggle"> View Quicklinks </button> <div class="j-menu-container"> <div class="j-menu-controls"> <button class="j-menu-toggle"> Close </button> <ul class="nav menu"> <li class="item-639"> <a class=" icon-communities" href="/hamlets" title="Our Communities"> <span>Our Communities</span> </a> </li> <li class="item-644"> <a class=" icon-forsale" href="#" title="Businesses For Sale"> <span>Businesses For Sale</span> </a> </li> <li class="item-640"> <a class=" icon-entrepreneurship" href="#" title="Youth Entrepreneurship"> <span>Youth Entrepreneurship</span> </a> </li> <li class="item-645"> <a class=" icon-approvals" href="#" title="Development Approvals"> <span>Development Approvals</span> </a> </li> <li class="item-641"> <a class=" icon-partnerships" href="#" title="Regional Partnerships"> <span>Regional Partnerships</span> </a> </li> <li class="item-646"> <a class=" icon-publications" href="#" title="Publications"> <span>Publications</span> </a> </li> <li class="item-642"> <a class=" icon-land" href="#" title="Land"> <span>Land</span> </a> </li> <li class="item-647"> <a class=" icon-directory" href="/business/business-directory" title="Business Directory"> <span>Business Directory</span> </a> </li> <li class="item-643"> <a class=" icon-franchise" href="#" title="Franchise Opps"> <span>Franchise Opps</span> </a> </li> <li class="item-648"> <a class=" icon-resources" href="#" title="Resources"> <span>Resources</span> </a> </li> </ul> </div> </div> </div> 

Also on updated JSFiddle .