CODEWITHSUNDEEP
javascriptjquery
StephenMeehan
StephenMeehan

Reputation: 1113

Hide a list when clicking outside (part 2)

The code below partly works, clicking the button toggles the menu. When the menu is visible I can click anywhere to close it.

But, if I click the button when the menu is visible it hides and then shows it again. That's not the expected behaviour.

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

Upvotes: 0

Views: 70

Answers (3)

Eliellel
Eliellel

Reputation: 1446

When click outside, you also need the exclude the situation when click on the button. other wise the fadeToggle() will trigger twice. 

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

  }
});
.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>

Upvotes: 1

Bhumi Shah
Bhumi Shah

Reputation: 9476

Try this code

$(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();
      }
   });
});

Demo : https://codepen.io/creativedev/pen/wXKwOJ

Upvotes: 1

Chilll007
Chilll007

Reputation: 612

You can try this code. This is happening cause when you click on button the class of the target element is country not 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>

Upvotes: 1

Related Questions