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>