下拉菜单关闭以点击其他位置

Question

我有这个样本：

＆＃13;

＆＃13;

jQuery('.account strong').click(function(e){
  jQuery(this).parent('div').addClass('show');
  jQuery('.account-dropdown').slideToggle(200);
});

＆＃13;

.account-dropdown{
  background: #fff;
  border-radius: 0 3px 3px 3px;
  box-shadow: 2px 3px 7px #555;
  display: none;
  left: 0;
  padding: 10px;
  position: absolute;
  text-align: left;
  top: 46px;
  width: 145px;
  z-index: 2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="account">
  <strong>Your account</strong>
  <div class="account-dropdown">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>  
  </div>  
</div>

＆＃13;

＆＃13;

＆＃13;

我想更改我的脚本，所以当你打开它时，菜单可以在任何地方关闭。

例如，如果我们点击".account strong '时，当前打开的菜单会关闭。

我想要从较少的div 'account-dropdown'开始关闭菜单。

你可以帮我解决这个问题吗？

提前致谢！

Answer 1

您可以参考以下代码：

$('.account strong').click(function(e) {
  $(this).parent('div').addClass('show');
  $('.account-dropdown').slideToggle(200);
  e.stopPropagation();
});

$(document).on('click', function(e) {
  if ($('.account-dropdown').is(":visible")) {
    if ($(e.target).closest(".account-dropdown").length === 0) {
      $('.account-dropdown').slideToggle(200);
    }
  }
});

.account-dropdown {
  background: #fff;
  border-radius: 0 3px 3px 3px;
  box-shadow: 2px 3px 7px #555;
  display: none;
  left: 0;
  padding: 10px;
  position: absolute;
  text-align: left;
  top: 46px;
  width: 145px;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="account">
  <strong>Your account</strong>
  <div class="account-dropdown">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>