单击外部后关闭下拉菜单

Question

如您所见，我有一个简单的导航菜单。点击“+”图标，下拉菜单打开，点击“-”图标，下拉菜单关闭。

我有一个目标。 单击外部或其他“+”时，上一个下拉菜单会自动关闭。我试过 if ( !isClickInside )，对我不起作用。

jQuery(document).ready(function($){

    // var menu_ul = '.main-navigation .menu';
  
    var menu_ul = $('.main-navigation').find('ul').first();
  
    menu_ul.children('.menu-item-has-children').children('a').append('<span class="mytheme_menu_switch">+</span>');
  
    // Touch friendly expanded nav
    // $(menu_ul + ' li span').click(function(event){
    $('.mytheme_menu_switch').click(function(event){
  
      event.preventDefault();
  
      // get the child of the clicked menu switch
      var child_menu = $(this).parent().parent().children('ul');
  
      // get the parent link of the clicked menu switch
      var parent_link = $(this).parent();
  
      // check if it's currently open or closed
      if ( child_menu.hasClass('childopen') ) {
        // if it's open, close it
  
        // remove any "active" class from parent item
        $(parent_link).removeClass('active');
        // hide child menu
        $(child_menu).removeClass('childopen');
        // set this open menu switch to +
        $(this).html('+');
  
      } else {
        // if it's closed, open it
  
        // hide any open child menus
        // $(menu_ul + ' ul').removeClass('childopen');
        menu_ul.children('ul').removeClass('childopen');
        // set any open menu switch symbols back to +
        // $(menu_ul + ' li span').html('+');
        menu_ul.children('li').children('span').html('+');
  
        // show correct child menu
        $(child_menu).addClass('childopen');
        // set this open menu switch to -
        $(this).html('-');
  
        return false;
  
      }
  
    });
  
    $('.navicon').click(function(){
      
      if ( menu_ul.css('display') == 'none' ) {
  
        menu_ul.addClass('show');
        menu_ul.removeClass('closed').addClass('open');
        menu_ul.children('.fa').removeClass('fa-navicon').addClass('fa-close');
  
      } else {
  
        menu_ul.removeClass('show');
        menu_ul.removeClass('open').addClass('closed');
        menu_ul.children('.fa').removeClass('fa-close').addClass('fa-navicon');
  
      }
  
    });
  
  });

.main-navigation h1 {
    display: none !important;
}

.main-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    white-space: nowrap;
}

.main-navigation ul li {
    cursor: pointer;
    list-style: none;
    display: block;
    position: relative;
    padding: 0;
    /* switch symbol for showing child */
    /* nav child menu */
    /* show child */
}

.main-navigation ul li a {
    display: inline-block;
}

.main-navigation ul li span {
    display: inline-block;
    text-align: right;
    width: 1.4em;
    padding-right: 0.5em;
    margin-left: 0.5em;
    margin-right: -0.5em;
}

.main-navigation ul li ul {
    display: none;
    padding: 0;
    margin: 0;
    background-color: #1f2021;
}

.main-navigation ul li ul.childopen {
    display: block;
}

/* expanded nav menu */
@media (min-width: 990px) {
    .navicon {
        display: none;
    }
    .navmenu {
        display: block;
    }
    .main-navigation ul {
        float: right;
        display: inline-table;
    }
    .main-navigation ul li {
        float: left;
        /* expanded nav child menu */
    }
    .main-navigation ul li a {
        padding: 1.2rem;
    }
    .main-navigation ul li ul {
        position: absolute;
        z-index: 9999;
        top: 100%;
        left: 0;
    }
    .main-navigation ul li ul li {
        float: none;
    }
    .main-navigation ul li ul li a {
        width: 100%;
        line-height: 4.5rem;
        padding: 0 2.1875rem;
    }
}

/* collapsed nav menu */
@media (max-width: 990px) {
    .navicon {
        float: right;
        font-size: 1.65rem;
        line-height: 2.8125rem;
        text-align: center;
        width: 54px;
        margin-top: 5px;
        cursor: pointer;
        color: #fbc02d;
    }
    .main-navigation ul {
        clear: left;
        display: none;
        /* collapsed nav child menu */
    }
    .main-navigation ul.show {
        display: block;
        background-color: #1f2021;
    }
    .main-navigation ul li a {
        width: 100%;
        line-height: 4.5rem;
        padding: 0 2.1875rem;
    }
    .main-navigation ul ul {
        position: relative;
        left: 0;
    }
}

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<nav id="site-navigation" class="main-navigation">

<div class="navicon closed"><i class="fas fa-bars"><span class="menu- 
text">Menu</span></i></div>

<div class="menu-testing-menu-container">
<ul id="primary-menu" class="menu">
<li><a href="#">Portfolio</a>
<ul class="sub-menu">
    <li><a href="#">Hello world!</a></li>
    <li><a href="#">Block: Image</a></li>
    <li><a href="#">Block: Button</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul class="sub-menu">
    <li><a href="#">Block: Quote</a></li>
    <li><a href="#">Block category: Common</a></li>
</ul></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>

</ul>
</div>
</nav>