在 JS 中另一个函数完成后调用一个函数

Question

我有一个菜单，当我单击按钮时它会滑出，这很好，但现在我想按其他任何地方来隐藏菜单，而不仅仅是按同一个按钮。

// menu
$('.toggle').click(function(event) {
 event.preventDefault();
 $('.self').toggleClass('show-m');
 $('.toggle').toggleClass('show-t');
 $('.content').toggleClass('move-co');
});


/*
$('#s-form').submit(function(event) {
 if (!$('#search').val()) {
  event.preventDefault();
 } else {
  $.pjax.submit(event, '#result');
 }
});
*/

*{
  outline: none !important;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}
li {
    list-style: none;
}
.content{
  padding: 100px 0;
}
/* menu */
/* toggle */
.menu .toggle {
    padding: 10px;
    position: fixed;
    top: 20px;
    left: 0;
    z-index: 10;
    background: #111;
    color: #fff;
    border: none;
}
.show-t {
    transform: translate(300px,0);
}
/* menu self */
.menu .self {
    width: 300px;
    padding: 15px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -310px;
    z-index: 20;
    text-align: center;
    background: white;
    box-shadow: 2px 0 10px 0 rgba(0,0,0,0.5);
}
.show-m {
    left: 0 !important;
}
.menu .self ul {
    padding: 0;
}
.menu .self ul li {
    padding: 10px 0;
    margin: 10px 0;
    text-align: center;
    background: #ecf0f1;
}
.menu .self li a {
    width: 100%;
    display: inline-block;
    color: #95a5a6;
}
.move-co {
    transform: translate(250px,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu">
  <button type="button" class="toggle">Menu</button>
  <nav class="self">
    <ul>
      <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
 </ul>
  </nav>
</div>

<section class="content">
    <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ex, nihil! Recusandae porro sit            facere architecto, optio id quis odio qui similique reiciendis dolor, saepe assumenda placeat            voluptatem iusto sunt!
      </p>
 </section>

编辑：

对于那些反对投票的人和运行，有一个神奇的按钮调用add a comment，你可以用它来表达解决方案:)。

Answer 1

在主体上绑定一个事件，然后根据目标执行一些操作：

// menu
$(document).click(function(event) {
    var $target = $(event.target),
        $target_is_menu = !!$target.closest('.menu').length,
        $target_is_button = !!$target.closest('.toggle').length,
        action = $target_is_button ? 'toggleClass' : 'removeClass';
  
    if($target_is_menu && !$target_is_button) return;

    if($target_is_button) event.preventDefault();
  
    $('.self')[action]('show-m');
    $('.toggle')[action]('show-t');
    $('.content')[action]('move-co');
});

*{
  outline: none !important;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}
li {
    list-style: none;
}
.content{
  padding: 100px 0;
}
/* menu */
/* toggle */
.menu .toggle {
    padding: 10px;
    position: fixed;
    top: 20px;
    left: 0;
    z-index: 10;
    background: #111;
    color: #fff;
    border: none;
}
.show-t {
    transform: translate(300px,0);
}
/* menu self */
.menu .self {
    width: 300px;
    padding: 15px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -310px;
    z-index: 20;
    text-align: center;
    background: white;
    box-shadow: 2px 0 10px 0 rgba(0,0,0,0.5);
}
.show-m {
    left: 0 !important;
}
.menu .self ul {
    padding: 0;
}
.menu .self ul li {
    padding: 10px 0;
    margin: 10px 0;
    text-align: center;
    background: #ecf0f1;
}
.menu .self li a {
    width: 100%;
    display: inline-block;
    color: #95a5a6;
}
.move-co {
    transform: translate(250px,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu">
  <button type="button" class="toggle">Menu</button>
  <nav class="self">
    <ul>
      <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
 </ul>
  </nav>
</div>

<section class="content">
    <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ex, nihil! Recusandae porro sit            facere architecto, optio id quis odio qui similique reiciendis dolor, saepe assumenda placeat            voluptatem iusto sunt!
      </p>
 </section>

Answer 2

你不能使用 jQuery .hover 事件吗？ http://api.jquery.com/hover/

在 JS 中另一个函数完成后调用一个函数

call a function after another has finished in JS

jquery

menu

show-hide