又快又脏：

Question

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

我使this pen工作正常。这是一个带有打开/关闭按钮的基本滑动菜单（基于此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

又快又脏：

当您点击内容时，

就像按下按钮一样：

.my.cnf

更好：

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

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

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

2 个答案:

又快又脏：

更好：