Exit hamburger menu by clicking anywhere else on screen

Question

I would like to be able to exit my hamburger menu by clicking anywhere else besides the hamburger menu. Right now the only way you can close it is by clicking the X, but I would like another option to close it.

jsfiddle - https://jsfiddle.net/1h3eoewa/

jQuery(document).ready(function() {
 jQuery(".submenu").slideUp("fast");
  jQuery(".menutoggle").click(function(){
   var id = jQuery(this).attr("id").replace("toggle","submenu");
   jQuery("#" + id).slideToggle("fast");    
  })
  
  
  jQuery('#hamburger-nav-icon').click(function() {
    jQuery(this).toggleClass('open');
      jQuery('body').css('overflow','hidden');  
    if (jQuery('#hamburger-menu-cover').css('opacity') == '0') {
      jQuery('#hamburger-menu-cover').css('opacity', '1');
      jQuery('#hamburger-menu-cover').fadeIn(300).css('display', 'table'); 
        jQuery('body').css('overflow','hidden');
    } else {
      jQuery('#hamburger-menu-cover').css('opacity', '0');
      jQuery('#hamburger-menu-cover').fadeOut(300).css('display', 'none');
        jQuery('body').css('overflow','visible');
    }
  });
});

/*--------------------------------------------------------------
## Hamburger Menu
--------------------------------------------------------------*/
#hamburger-menu-cover {
    z-index: 5;
    width: 100%;
    height: 100%;
  background: rgba(255, 255, 255, 0.9);
    position: fixed;
    font-size: 1.5em;
    text-align: center;
    right: 0px;
    top: 0px;
    opacity: 0;
    display: none;
    overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
    overflow: hidden;
}
.hamburger-menu {
background:#fff;
   width: 432px;
    height: 100%;
  border-right: 1px solid #808080;
  position: fixed;
  top: 0px;
      overflow-y: scroll;
  -webkit-overflow-scrolling:touch; // mobile safari
}
.hamburger-menu-container {
  margin-left: 33px;
  margin-top: 100px;
  padding-right: 32px;
  padding-bottom: 40px; 
      overflow-y: scroll;
  -webkit-overflow-scrolling:touch; // mobile safari
}
.hamburger-menu-links li  {
    list-style: none;
      font-family: 'freightlight';
  font-size: 36px;
  display: block;
  line-height: 57px;
    font-style: italic;
    text-transform: uppercase;
    text-decoration: none;
    text-align: justify;
}
.hamburger-menu-links li a {
    text-decoration: none;
    color:#000;
}
.hamburger-menu-links li a:hover {
    text-decoration: none;
    color:#000;
}
.hamburger-menu-links li a:active {
    text-decoration: none;
    color:#000;
}
.hamburger-menu-links li a:visited {
    text-decoration: none;
    color:#000;
}
.hamburger-menu-links ul {
          border-bottom: 1px solid #808080;
    padding-bottom: 30px;
}
.submenu li {
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 2px;
    font-style: normal;
}
.hamburger-menu-social-links h3 {
  margin-left: 40px;
      padding-right: 32px;
  margin-top: 47px;
  padding-bottom: 0px; 
        list-style: none;
      font-family: 'freightlight';
  font-size: 18px;
  display: block;
    font-style: italic;
    text-transform: uppercase;
    text-decoration: none;
    text-align: justify;
     letter-spacing: 0px;
}
.hamburger-menu-social-links {
    padding-right: 0px;
    letter-spacing: 12px;
}

#hamburger-nav-icon {
    z-index: 20;
  width: 50px;
  height: 35px;
  position: relative;
  margin: 35px 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#hamburger-nav-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 40px;
  background: #000;
  opacity: 1;
  left: 0;
}

/* Icon 3 */

#hamburger-nav-icon span:nth-child(1) {
  top: 0px;
}

#hamburger-nav-icon span:nth-child(2),#hamburger-nav-icon span:nth-child(3) {
  top: 12px;
}

#hamburger-nav-icon span:nth-child(4) {
  top: 24px;
}

#hamburger-nav-icon.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#hamburger-nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#hamburger-nav-icon.open span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}
#toggle1, #toggle2, #toggle4, #toggle7, #toggle8 {
    font-size: 12px;
    padding-left:40px;
    padding-top:25px;
    display: inline;
    position: absolute;
    color: #B2B2B2;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger-nav-icon">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
        <div id="hamburger-menu-cover">
            <div class="hamburger-menu">
                <div class="hamburger-menu-container">
                <div class="hamburger-menu-links">
            <ul>
                <li><a href="#">Item 1<i class="fa fa-ellipsis-h menutoggle" id="toggle1" aria-hidden="true"></i></a></li>
<div class="submenu" id="submenu1">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
                    </div>
                <li><a href="#">Item 2<i class="fa fa-ellipsis-h menutoggle" id="toggle2" aria-hidden="true"></i></a></li>
                <div class="submenu" id="submenu2">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
                    </div>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4<i class="fa fa-ellipsis-h menutoggle" id="toggle4" aria-hidden="true"></i></a></li>
<div class="submenu" id="submenu4">
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
                    </div>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 6</a></li>
                <li><a href="#">Item 7<i class="fa fa-ellipsis-h menutoggle" id="toggle7" aria-hidden="true"></i></a></li>
                <div class="submenu" id="submenu7">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                <li><a href="#">Sub Item 4</a></li>
                </div>
                <li><a href="#">Item 8<i class="fa fa-ellipsis-h menutoggle" id="toggle8" aria-hidden="true"></i></a></li>
                     <div class="submenu" id="submenu8">
                <li><a href="#">Sub Item 1</a></li>
                <li><a href="#">Sub Item 2</a></li>
                <li><a href="#">Sub Item 3</a></li>
                </div>
            </ul>
                    </div>
                     <div class="hamburger-menu-social-links">
      <h3>Social</h3>
<a href="#" target="blank" title="twitter">
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-twitter.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png'" /></a>
<a href="#" target="blank" title="Facebook"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-facebook.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png'" /></a>
<a href="#" target="blank" title="Pinterest"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-pinterest.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png'" /></a>
<a href="#" target="blank" title="Instagram">
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-instagram.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png'" />
</a>
<a href="#" target="blank" title="Snapchat"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-snapchat.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png'" /></a>
<a href="#" target="blank" title="Youtube"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-youtube.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png'" /></a>
<a href="#" target="blank" title="Bloglovin"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-bloglovin.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png'" />
</a>
                    </div>
                    
                    
                </div>
            </div>
</div>

Answer 1

Ok, let me run through the problems first. You need some code that catches all click events in the document, except those on #hamburger-nav-icon. When that happens, check if #hamburger-nav-icon has the class open. If so, then trigger a click on #hamburger-nav-icon.

So that would look something like this, right?

$(document).click(function(event) {
  if ($('#hamburger-nav-icon').hasClass('open')) {
    if ($(event.target).is('#hamburger-nav-icon')) {
    } else {
      $('#hamburger-nav-icon').click();
    }
  }
});

Well, not really.

The problem with that, is that when you click on anywhere except the #hamburger-nav-icon div, things work well, but not when you click on the span's inside the div). So, when there is a click on the document, you need to check if the target is #hamburger-nav-icon or #hamburger-nav-icon span (in otherwords, all span children of #hamburger-nav-icon)

There are two ways to go about this, but one is longer and takes up a bit more space, but I will show you both anyway.

The first is to use an if/else if/else statement:

$(document).click(function(event) {
  if ($('#hamburger-nav-icon').hasClass('open')) {
    if ($(event.target).is('#hamburger-nav-icon')) {
    //I forgot to add these two lines
    } else if ($(event.target).is('.hamburger-menu')) { 
    } else if ($(event.target).is('.hamburger-menu *')) {
    } else if ($(event.target).is('#hamburger-nav-icon span')) {
    } else {
      $('#hamburger-nav-icon').click();
    }
  }
});

The second, is to use what I call an if or/else statement:

$(document).click(function(event) {
  if ($('#hamburger-nav-icon').hasClass('open')) {
    if ($(event.target).is('#hamburger-nav-icon')||$(event.target).is('#hamburger-nav-icon span')||$(event.target).is('#hamburger-menu')||$(event.target).is('#hamburger-menu *')) {
    } else {
      $('#hamburger-nav-icon').click();
    }
  }
});

(In JavaScript, || means or, and && means and.)

So there you have it. There are two code snippets below, the first using the first method, and the second using the second method.

$(document).ready(function() {
  $(".submenu").slideUp("fast");
  $(".menutoggle").click(function() {
    var id = $(this).attr("id").replace("toggle", "submenu");
    $("#" + id).slideToggle("fast");
  })
  $('#hamburger-nav-icon').click(function() {
    $(this).toggleClass('open');
    $('body').css('overflow', 'hidden');
    if ($('#hamburger-menu-cover').css('opacity') == '0') {
      $('#hamburger-menu-cover').css('opacity', '1');
      $('#hamburger-menu-cover').fadeIn(300).css('display', 'table');
      $('body').css('overflow', 'hidden');
    } else {
      $('#hamburger-menu-cover').css('opacity', '0');
      $('#hamburger-menu-cover').fadeOut(300).css('display', 'none');
      $('body').css('overflow', 'visible');
    }
  });
});
$(document).click(function(event) {
  if ($('#hamburger-nav-icon').hasClass('open')) {
    if ($(event.target).is('#hamburger-nav-icon')) {
    } else if ($(event.target).is('.hamburger-menu')) {
    } else if ($(event.target).is('.hamburger-menu *')) {
    } else if ($(event.target).is('#hamburger-nav-icon span')) {
    } else {
      $('#hamburger-nav-icon').click();
    }
  }
});

/*--------------------------------------------------------------
## Hamburger Menu
--------------------------------------------------------------*/

#hamburger-menu-cover {
  z-index: 5;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  position: fixed;
  font-size: 1.5em;
  text-align: center;
  right: 0px;
  top: 0px;
  opacity: 0;
  display: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}

.hamburger-menu {
  background: #fff;
  width: 432px;
  height: 100%;
  border-right: 1px solid #808080;
  position: fixed;
  top: 0px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}

.hamburger-menu-container {
  margin-left: 33px;
  margin-top: 100px;
  padding-right: 32px;
  padding-bottom: 40px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}

.hamburger-menu-links li {
  list-style: none;
  font-family: 'freightlight';
  font-size: 36px;
  display: block;
  line-height: 57px;
  font-style: italic;
  text-transform: uppercase;
  text-decoration: none;
  text-align: justify;
}

.hamburger-menu-links li a {
  text-decoration: none;
  color: #000;
}

.hamburger-menu-links li a:hover {
  text-decoration: none;
  color: #000;
}

.hamburger-menu-links li a:active {
  text-decoration: none;
  color: #000;
}

.hamburger-menu-links li a:visited {
  text-decoration: none;
  color: #000;
}

.hamburger-menu-links ul {
  border-bottom: 1px solid #808080;
  padding-bottom: 30px;
}

.submenu li {
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 2px;
  font-style: normal;
}

.hamburger-menu-social-links h3 {
  margin-left: 40px;
  padding-right: 32px;
  margin-top: 47px;
  padding-bottom: 0px;
  list-style: none;
  font-family: 'freightlight';
  font-size: 18px;
  display: block;
  font-style: italic;
  text-transform: uppercase;
  text-decoration: none;
  text-align: justify;
  letter-spacing: 0px;
}

.hamburger-menu-social-links {
  padding-right: 0px;
  letter-spacing: 12px;
}

#hamburger-nav-icon {
  z-index: 20;
  width: 50px;
  height: 35px;
  position: relative;
  margin: 35px 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#hamburger-nav-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 40px;
  background: #000;
  opacity: 1;
  left: 0;
}


/* Icon 3 */

#hamburger-nav-icon span:nth-child(1) {
  top: 0px;
}

#hamburger-nav-icon span:nth-child(2),
#hamburger-nav-icon span:nth-child(3) {
  top: 12px;
}

#hamburger-nav-icon span:nth-child(4) {
  top: 24px;
}

#hamburger-nav-icon.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#hamburger-nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#hamburger-nav-icon.open span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#toggle1,
#toggle2,
#toggle4,
#toggle7,
#toggle8 {
  font-size: 12px;
  padding-left: 40px;
  padding-top: 25px;
  display: inline;
  position: absolute;
  color: #B2B2B2;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="hamburger-nav-icon">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="hamburger-menu-cover">
  <div class="hamburger-menu">
    <div class="hamburger-menu-container">
      <div class="hamburger-menu-links">
        <ul>
          <li><a href="#">Item 1<i class="fa fa-ellipsis-h menutoggle" id="toggle1" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu1">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
            <li><a href="#">Sub Item 4</a></li>
          </div>
          <li><a href="#">Item 2<i class="fa fa-ellipsis-h menutoggle" id="toggle2" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu2">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
            <li><a href="#">Sub Item 4</a></li>
          </div>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4<i class="fa fa-ellipsis-h menutoggle" id="toggle4" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu4">
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
            <li><a href="#">Sub Item 4</a></li>
          </div>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
          <li><a href="#">Item 7<i class="fa fa-ellipsis-h menutoggle" id="toggle7" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu7">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
            <li><a href="#">Sub Item 4</a></li>
          </div>
          <li><a href="#">Item 8<i class="fa fa-ellipsis-h menutoggle" id="toggle8" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu8">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
          </div>
        </ul>
      </div>
      <div class="hamburger-menu-social-links">
        <h3>Social</h3>
        <a href="#" target="blank" title="twitter">
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-twitter.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png'" /></a>
        <a href="#" target="blank" title="Facebook"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-facebook.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png'" /></a>
        <a href="#" target="blank" title="Pinterest"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-pinterest.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png'" /></a>
        <a href="#" target="blank" title="Instagram">
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-instagram.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png'" />
</a>
        <a href="#" target="blank" title="Snapchat"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-snapchat.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png'" /></a>
        <a href="#" target="blank" title="Youtube"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-youtube.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png'" /></a>
        <a href="#" target="blank" title="Bloglovin"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-bloglovin.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png'" />
</a>
      </div>


    </div>
  </div>
</div>

$(document).ready(function() {
  $(".submenu").slideUp("fast");
  $(".menutoggle").click(function() {
    var id = $(this).attr("id").replace("toggle", "submenu");
    $("#" + id).slideToggle("fast");
  })
  $('#hamburger-nav-icon').click(function() {
    $(this).toggleClass('open');
    $('body').css('overflow', 'hidden');
    if ($('#hamburger-menu-cover').css('opacity') == '0') {
      $('#hamburger-menu-cover').css('opacity', '1');
      $('#hamburger-menu-cover').fadeIn(300).css('display', 'table');
      $('body').css('overflow', 'hidden');
    } else {
      $('#hamburger-menu-cover').css('opacity', '0');
      $('#hamburger-menu-cover').fadeOut(300).css('display', 'none');
      $('body').css('overflow', 'visible');
    }
  });
});
$(document).click(function(event) {
  if ($('#hamburger-nav-icon').hasClass('open')) {
    if ($(event.target).is('#hamburger-nav-icon')||$(event.target).is('#hamburger-nav-icon span')||$(event.target).is('.hamburger-menu')||$(event.target).is('.hamburger-menu *')) {
    } else {
      $('#hamburger-nav-icon').click();
    }
  }
});

/*--------------------------------------------------------------
## Hamburger Menu
--------------------------------------------------------------*/

#hamburger-menu-cover {
  z-index: 5;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  position: fixed;
  font-size: 1.5em;
  text-align: center;
  right: 0px;
  top: 0px;
  opacity: 0;
  display: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}

.hamburger-menu {
  background: #fff;
  width: 432px;
  height: 100%;
  border-right: 1px solid #808080;
  position: fixed;
  top: 0px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}

.hamburger-menu-container {
  margin-left: 33px;
  margin-top: 100px;
  padding-right: 32px;
  padding-bottom: 40px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}

.hamburger-menu-links li {
  list-style: none;
  font-family: 'freightlight';
  font-size: 36px;
  display: block;
  line-height: 57px;
  font-style: italic;
  text-transform: uppercase;
  text-decoration: none;
  text-align: justify;
}

.hamburger-menu-links li a {
  text-decoration: none;
  color: #000;
}

.hamburger-menu-links li a:hover {
  text-decoration: none;
  color: #000;
}

.hamburger-menu-links li a:active {
  text-decoration: none;
  color: #000;
}

.hamburger-menu-links li a:visited {
  text-decoration: none;
  color: #000;
}

.hamburger-menu-links ul {
  border-bottom: 1px solid #808080;
  padding-bottom: 30px;
}

.submenu li {
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 2px;
  font-style: normal;
}

.hamburger-menu-social-links h3 {
  margin-left: 40px;
  padding-right: 32px;
  margin-top: 47px;
  padding-bottom: 0px;
  list-style: none;
  font-family: 'freightlight';
  font-size: 18px;
  display: block;
  font-style: italic;
  text-transform: uppercase;
  text-decoration: none;
  text-align: justify;
  letter-spacing: 0px;
}

.hamburger-menu-social-links {
  padding-right: 0px;
  letter-spacing: 12px;
}

#hamburger-nav-icon {
  z-index: 20;
  width: 50px;
  height: 35px;
  position: relative;
  margin: 35px 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#hamburger-nav-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 40px;
  background: #000;
  opacity: 1;
  left: 0;
}


/* Icon 3 */

#hamburger-nav-icon span:nth-child(1) {
  top: 0px;
}

#hamburger-nav-icon span:nth-child(2),
#hamburger-nav-icon span:nth-child(3) {
  top: 12px;
}

#hamburger-nav-icon span:nth-child(4) {
  top: 24px;
}

#hamburger-nav-icon.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#hamburger-nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#hamburger-nav-icon.open span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#toggle1,
#toggle2,
#toggle4,
#toggle7,
#toggle8 {
  font-size: 12px;
  padding-left: 40px;
  padding-top: 25px;
  display: inline;
  position: absolute;
  color: #B2B2B2;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="hamburger-nav-icon">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="hamburger-menu-cover">
  <div class="hamburger-menu">
    <div class="hamburger-menu-container">
      <div class="hamburger-menu-links">
        <ul>
          <li><a href="#">Item 1<i class="fa fa-ellipsis-h menutoggle" id="toggle1" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu1">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
            <li><a href="#">Sub Item 4</a></li>
          </div>
          <li><a href="#">Item 2<i class="fa fa-ellipsis-h menutoggle" id="toggle2" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu2">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
            <li><a href="#">Sub Item 4</a></li>
          </div>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4<i class="fa fa-ellipsis-h menutoggle" id="toggle4" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu4">
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
            <li><a href="#">Sub Item 4</a></li>
          </div>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
          <li><a href="#">Item 7<i class="fa fa-ellipsis-h menutoggle" id="toggle7" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu7">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
            <li><a href="#">Sub Item 4</a></li>
          </div>
          <li><a href="#">Item 8<i class="fa fa-ellipsis-h menutoggle" id="toggle8" aria-hidden="true"></i></a></li>
          <div class="submenu" id="submenu8">
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
          </div>
        </ul>
      </div>
      <div class="hamburger-menu-social-links">
        <h3>Social</h3>
        <a href="#" target="blank" title="twitter">
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-twitter.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png'" /></a>
        <a href="#" target="blank" title="Facebook"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-facebook.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png'" /></a>
        <a href="#" target="blank" title="Pinterest"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-pinterest.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png'" /></a>
        <a href="#" target="blank" title="Instagram">
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-instagram.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png'" />
</a>
        <a href="#" target="blank" title="Snapchat"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-snapchat.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png'" /></a>
        <a href="#" target="blank" title="Youtube"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-youtube.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png'" /></a>
        <a href="#" target="blank" title="Bloglovin"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-bloglovin.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png'" />
</a>
      </div>


    </div>
  </div>
</div>

Edit: I forgot to add some more conditions to the if statements; One to check if the element is #hamburger-menu and one to check if the element is a child of #hamburger-menu. I've added those lines above ^^