点击外面时隐藏列表（第2部分）

Question

以下代码部分有效，点击button可切换菜单。当菜单可见时，我可以点击任何地方关闭它。

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

$(".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

试试此代码

$(document).ready(function() {
   $(".lang-toggle-btn").click(function() {
      event.preventDefault();
      $(this.nextElementSibling).fadeToggle();
  });
  $(document).mouseup(function(e) {
      if (e.target.className == "country") {
        return false;
      }
      var container = $(".lang-menu");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.fadeOut();
      }
   });
});

演示：https://codepen.io/creativedev/pen/wXKwOJ

Answer 2

您可以尝试使用此代码。这是因为当你点击按钮时，目标元素的类是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>

Answer 3

单击外部时，还需要在单击按钮时排除情况。另外，fadeToggle()会触发两次。

＆＃13;

＆＃13;

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

  $(this.nextElementSibling).fadeToggle();

});

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

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

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

    container.fadeOut();

  }
});

＆＃13;

.lang-menu {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;