单击任意位置以关闭切换菜单，单击后是否不切换所有子菜单？

Question

到目前为止，我有这个脚本：

 $(document).ready(function(){

// Menu Add Class Left
    $("#hamburger-icon").click(function(){
    $(".slide-menu").toggleClass("slide-left");
});

//  Menu Add Class Close        
$('.slide-close-button button, .mdl-layout__obfuscator').click(function(){
    $(".slide-menu").removeClass("slide-left");
});
// Menu Dropdown menu active
    $(".dropdownmenu").click(function(){
    $(".sub-menu").toggleClass("active"),fadeIn(46000);
});
});

它运作良好，但不幸的是，如果我单击页面上的任意位置，即使单击“关闭”或“后退”汉堡包菜单，它也不会关闭。

如何通过单击我当前所在页面上的任意位置来关闭它？

此外，如果单击“父级1”或“父级2”，则另一个父级会折叠。我也该如何解决？

完整示例：

https://jsfiddle.net/vpzm9602/

Answer 1

要关闭侧面菜单，请使用mouseup，因此每次您在side-menu类之外单击时，它都会关闭。

问题是您没有选择父级的子级，这就是为什么每次单击一个下拉菜单时，父级都会打开。 请尝试以下方法：

/* ------------------------------------ */	
/*  MTD Menu
/* ------------------------------------ */	
$(document).ready(function(){

//closing menu by clicking to any
const $menu = $('.slide-menu');
$(document).mouseup(function (e) {
   if (!$menu.is(e.target) // if the target of the click isn't the container...
   && $menu.has(e.target).length === 0) // ... nor a descendant of the container
   {
     $menu.removeClass('slide-left');
  }
 });
// Menu Add Class Left
	$("#hamburger-icon").click(function(){
	$(".slide-menu").toggleClass("slide-left");
});

//  Menu Add Class Close 		
$('.slide-close-button button, .mdl-layout__obfuscator').click(function(){
    $(".slide-menu").removeClass("slide-left");
});
// Menu Dropdown menu active

 $(".dropdownmenu").click(function(){
    
    var target = $(this).parent().children(".sub-menu");
    $(target).toggleClass("active");
  });

});

/* Starting */


#hamburger-icon {
  height: 20px;
  position: relative;
  display: block;
  margin-top: 1.200em;
  z-index: 9998;
  width: 50px;
  float: left;
  margin-left: 10px;
}

#hamburger-icon .line {
  display: block;
  background: #000;
  width: 35px;
  height: 5px;
  position: absolute;
  left: 0;
  border-radius: 4px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
}
#hamburger-icon .line.line-1 {
  top: 0;
}
#hamburger-icon .line.line-2 {
  top: 50%;
}
#hamburger-icon .line.line-3 {
  top: 100%;
}
#hamburger-icon.active .line-1 {
  transform: translateY(10px) translateX(0) rotate(45deg);
  -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
  -moz-transform: translateY(10px) translateX(0) rotate(45deg)
}
#hamburger-icon.active .line-2 {
  opacity: 0;
}
#hamburger-icon.active .line-3 {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-10px) translateX(0) rotate(-45deg)
}

/* Slide Menu */
.slide-menu {
  position: fixed;
    -webkit-transform: translateX(-285px);
    -ms-transform: translateX(-285px);
    transform: translateX(-285px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
  background: #fff;
  top:0;
  bottom: 0;
  color: #333;
  z-index: 9999;
  width: 250px;
    -webkit-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
    box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
}
.slide-header {
  height: 150px;
  color: #fff;
  top:0;
  background: url(mmm.png)no-repeat center center/cover;
  position: relative;
  text-align: center;
	background-size: contain;
    padding: 5px;
    background-origin: content-box;
	border-bottom: 1px solid #5555;
}
.slide-close-button button:hover{
  background-color: #a1a1a1
}
.slide-close-button button:active {
  background-color: #bbb
}
.slide-close-button button {
  background: #aaa;
  border: 0;
  font-size: 16px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  position: absolute;
  bottom: -15px;
  outline: none;
  right: 2em;
  z-index: 99999;
	padding: 0;
	line-height: 25px;
}
.slide-header>h1 {
  padding: 2em 0 0
}
.slide-header p {
  font-size: 12px
}
.slide-menu>.slide-menu-here>.menu {
  padding: .5em 0;
}
.slide-menu>.slide-menu-here>.menu li {
  position: relative
}
.slide-menu>.slide-menu-here>.menu li>a{
  padding: .8em 1em;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #ececec;
  display: inline-block
}
.slide-menu>.slide-menu-here>.menu li.title span {
  padding: .8em 1em;
  border-bottom: 1px solid #ececec;
  width: 100%;
  position: relative;
  display: inline-block;
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu {
    -webkit-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .65s;
    transition-duration: .65s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    display:none
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu.active {
  display: block;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu>li>a {
  padding-left: 2em;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5
}
.slide-menu>.slide-menu-here>.menu li.title>.dropdownmenu:after {
  content: "\f107";
  top: 10px;
  position: Absolute;
  right: 2em;
  background-color: #aaa;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  line-height: 20px;
  color: #fff;
  font: normal normal normal 14px/20px FontAwesome;
}
.slide-menu a:hover {
  background-color: #f8f8f8
}
/* Slide Left  */
.slide-left {
      -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    z-index: 99999;
}
.mdl-layout__obfuscator {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.slide-left~.mdl-layout__obfuscator {
    background-color: rgba(0,0,0,.5);
    visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
  
  
  <div class="left menu-icon">
                <a href="#" id="hamburger-icon" title="Menu">
                  <span class="line line-1"></span>
                  <span class="line line-2"></span>
                  <span class="line line-3"></span>
                </a>
             </div>


<div class="slide-menu">
    <div class="slide-header">
      <h1></h1>
      <p></p>
      <div class="slide-close-button">
        <button class="close"><i class="fa fa-close"></i></button>
      </div>
    </div>
    <div class="slide-menu-here">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li class="title"><span>Parent 1</span><div class="dropdownmenu"></div>
          <ul class="sub-menu">
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
          </ul>
        </li>
        <li class="title"><span>Parent 2</span><div class="dropdownmenu"></div>
          <ul class="sub-menu">
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
          </ul>
           <li><a href="/">new 1</a></li>

            <li><a href="/">new 1</a></li>
      </ul>
    </div>
  </div>