Overlay menu with collapsible list disappears onclick

Question

I am using an overlay menu for my website. I also applied some collapsible functionality on the menu to show sub menu. My problem is that, when I click on main menu to show sub menu, the whole overlay menu disappears. I Am not able to figure our the problem. I am using Bootstrap 4.1.0.

Please help!

Here is my code...

 // Menu Overlay $(document).ready(function() { $("#nav-icon").click(function() { $(this).toggleClass("animate-icon"), $("#overlay").fadeToggle() }) }), $(document).ready(function() { $("#overlay").click(function() { $("#nav-icon").removeClass("animate-icon"), $("#overlay").toggle() }) }); // Show Sub Menu var coll = document.getElementsByClassName("subMenu"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } 

 #nav-icon { position: absolute; top: 30px; right: 30px; width: 30px; height: 28px; z-index: 10; cursor: pointer; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } #nav-icon span { position: absolute; display: block; width: 100%; height: 4px; background-color: #be9bba; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-icon span:nth-child(1) { top: 0px; } #nav-icon span:nth-child(2) { top: 10px; } #nav-icon span:nth-child(3) { top: 20px; } #nav-icon.animate-icon span:nth-child(1) { top: 10px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } #nav-icon.animate-icon span:nth-child(2) { opacity: 0; left: -60px; } #nav-icon.animate-icon span:nth-child(3) { top: 10px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } #overlay { display: -webkit-box; display: -ms-flexbox; display: flex; /* Overlay positioning */ display: none; position: absolute; left: 0; top: 0; z-index: 8; width: 100%; padding-top: 100px; height: 100%; background: rgba(0, 0, 0, 0.9); } #overlay ul { margin: 0; padding: 0; list-style: none; } #overlay ul li { padding: 10px 0; } #overlay ul li a { color: #fff; font-size: 200%; letter-spacing: 5px; text-transform: uppercase; font-family: 'Yanone Kaffeesatz', sans-serif; } #overlay ul li a:hover { color: #ccc; text-decoration: none; } .subMenu-content { max-height: 0; font-size: 11px; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="nav-icon"> <span></span> <span></span> <span></span> </div> <div id="overlay" class="text-center"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#" class="subMenu">Menu 2 &raquo;</a> <ul class="subMenu-content"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> 

Answer 1

You need to remove onClick JS function for overlay , that will fix the issue. Ideally you don't want to close menu unless someone click on close button

 // Menu Overlay $(document).ready(function(){ $("#nav-icon").click(function(){ $(this).toggleClass("animate-icon") $("#overlay").fadeToggle() }) }); // Show Sub Menu var coll = document.getElementsByClassName("subMenu"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } 

 #nav-icon { position: absolute; top: 30px; right: 30px; width: 30px; height: 28px; z-index: 10; cursor: pointer; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } #nav-icon span { position: absolute; display: block; width: 100%; height: 4px; background-color: #be9bba; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-icon span:nth-child(1) { top: 0px; } #nav-icon span:nth-child(2) { top: 10px; } #nav-icon span:nth-child(3) { top: 20px; } #nav-icon.animate-icon span:nth-child(1) { top: 10px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } #nav-icon.animate-icon span:nth-child(2) { opacity: 0; left: -60px; } #nav-icon.animate-icon span:nth-child(3) { top: 10px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } #overlay { display: -webkit-box; display: -ms-flexbox; display: flex; /* Overlay positioning */ display: none; position: absolute; left: 0; top: 0; z-index: 8; width: 100%; padding-top: 100px; height: 100%; background: rgba(0, 0, 0, 0.9); } #overlay ul { margin: 0; padding: 0; list-style: none; } #overlay ul li { padding: 10px 0; } #overlay ul li a { color: #fff; font-size: 200%; letter-spacing: 5px; text-transform: uppercase; font-family: 'Yanone Kaffeesatz', sans-serif; } #overlay ul li a:hover { color: #ccc; text-decoration: none; } .subMenu-content { max-height: 0; font-size: 11px; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="nav-icon"> <span></span> <span></span> <span></span> </div> <div id="overlay" class="text-center"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#" class="subMenu">Menu 2 &raquo;</a> <ul class="subMenu-content"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>