javascript - 关闭以单击其他位置的下拉菜单

Question

我有这个样本:

jQuery('.account strong').click(function(e){
  jQuery(this).parent('div').addClass('show');
  jQuery('.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/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>

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

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

我希望菜单在 less 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>