javascript - 单击外部时隐藏列表(第 2 部分)

Question

下面的代码部分有效，单击按钮可切换菜单。当菜单可见时，我可以单击任意位置将其关闭。

但是，如果我在菜单可见时单击按钮，它会隐藏然后再次显示。这不是预期的行为。

$(".lang-toggle-btn").click(function() {
  event.preventDefault();

  $(this.nextElementSibling).fadeToggle();

});

$(document).mouseup(function(e) {

  if (e.target.className == "lang-toggle-btn") {
    return false;
  }
  var container = $(".lang-menu");

  if (!container.is(e.target) && container.has(e.target).length === 0) {

    container.fadeOut();

  }
});

.lang-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lang-wrap">
  <div class="lang-toggle">
    <span>Currently viewing</span>
    <button class="lang-toggle-btn"><span class="flag"></span><span class="country">United Kingdom</span></button>

    <div class="lang-menu">
      <ul>
        <li><a href="/de"><span class="flag"></span><span class="country">Deutschland</span></a></li>
        <li><a class="active" href="/"><span class="flag"></span><span class="country">United Kingdom</span></a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

你可以试试这个代码。发生这种情况是因为当您单击按钮时，目标元素的类是 country 而不是 lang-toggle-btn。

jQuery(".lang-toggle-btn").click(function() {
      event.preventDefault();
      event.stopPropagation();
     jQuery(this.nextElementSibling).fadeToggle();

    });

    jQuery(document).mouseup(function(e) {
        if(e.target.className == "lang-toggle-btn" || e.target.className == "flag" || e.target.className == "country"){
        return false;
      }
      var container = $(".lang-menu");

      if (!container.is(e.target) && container.has(e.target).length === 0) {

        container.fadeOut();

      }
    });

.lang-menu {
            display: none;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="lang-wrap">
      <div class="lang-toggle">
        <span>Currently viewing</span>
        <button class="lang-toggle-btn"><span class="flag"></span><span class="country">United Kingdom</span></button>
      
      <div class="lang-menu">
        <ul>
          <li><a href="/de"><span class="flag"></span><span class="country">Deutschland</span></a></li>
          <li><a class="active" href="/"><span class="flag"></span><span class="country">United Kingdom</span></a></li>
        </ul>
      </div></div>
    </div>