通过单击外部关闭滑动 div

Question

我花了几个小时来找到解决我问题的方法，但还没有任何效果:/

我制作了 this pen which is working fine. It's a basic sliding menu with a open/close button (based on this jsfiddle) 但我想添加一项功能，允许用户通过单击菜单以外的任意位置来关闭菜单。

代码如下：

HTML

<div class='header'>
  <span class='button'>&#9776;</span>
  <span class="logo">LOGO HERE</span>
</div>
<div class='side-panel'>
  <nav>
    <ul>
      <li><a href='#'>ITEM 1</a></li>
      <li><a href='#'>ITEM 2</a></li>
      <li><a href='#'>ITEM 3</a></li>
    </ul>
  </nav>
</div>
<div class='content'>CONTENT HERE</div>

JS

$('.button').click(function(){
  if($(this).hasClass('active')){
    $(this).removeClass('active');
      $(this).html("&#9776;");
    $('.side-panel').animate({
    right:"-220px"
    });
    $(this).animate({
    right:"0"
    });
  }
  else{
    $(this).addClass('active');
    $(this).html("&#9587;");
    $('.side-panel').animate({
    right:"0",
  });
  $('.button').animate({
    right:"220px"
  });
  }
});

我在这里发现了一些非常有趣的话题，我试着添加这个：

$(document).click(function(){
  if ($('.button').hasClass('active')){
    $(this).removeClass('active');
  }
});

但没有用。我对 Js 的了解是基本的（因为我的英语（抱歉）），而且我很确定我离解决方案不远但是我已经花了 3 个多小时并且我开始绝望了;）我希望我是足够清楚，但如果您需要更多详细信息，请随时询问。干杯，感谢您的帮助。

CODEPEN

Answer 1

快速而肮脏：

当您点击内容时，就像按下按钮一样：

$('.content').click(
    function() { 
      $(".button").click(); 
    });

更好：

从函数中的 .button click 事件中提取代码并调用它两次：

$('.button').click(function(){
  showhide();
});

$('.content').click(function() { 
  showhide();
});

function showhide()
{
  var $this = $(".button");
  if($this.hasClass('active')){
  $this.removeClass('active');
    $this.html("&#9776;");
  $('.side-panel').animate({
    right:"-220px"
  });
  $this.animate({
    right:"0"
  });
  }
  else{
  $this.addClass('active');
  $this.html("&#9587;");
  $('.side-panel').animate({
    right:"0",
  });
  $('.button').animate({
    right:"220px"
  });
  }
}

Answer 2

我终于找到了解决办法。我刚刚添加了这个：

$('.content').click(function() {
  if($('.button').hasClass('active')){
   $('.button').removeClass('active');
   $('.button').html("&#9776;");
   $('.side-panel').animate({
    right:"-220px"
  });
  $('.button').animate({
    right:"0"
  });
  } 
});

现在，在内容中的任何点击都会关闭 div .side-panel

通过单击外部关闭滑动 div

Close a sliding div by clicking outside of it

menu

slide

快速而肮脏：

更好：