Why does not the block closing work when the button is pressed again?

Question

There is a menu and the behavior for clicks in different places, but only the function that opens the menu when you press the button works. Closing the same menu when clicking on the same button does not work. I don't know, maybe I wrote the wrong condition for closing. I can not understand. Where am I wrong?

function hideMenu(menuId) {
  if ($(menuId).is(":visible")) {
    $(menuId).hide();
  } else {
    $(".hiddenMenu:visible").hide();
    $(menuId).show('800');
  }
  
  $(document).mouseup(function(e) {
    var div = $(menuId);
    if (!div.is(e.target) && div.has(e.target).length === 0) {
      div.hide();
    }
  });

  console.log(menuId);
}

body {
  margin: 0;
  padding: 0;
  background: #040921;
}

.container {
  width: 80px;
  height: 100vh;
  background: #263154;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.container nav ul li a {
  cursor: pointer;
}

#submenuId1 {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 80px;
  background: orange;
  display: none;
}

#submenuId2 {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 80px;
  background: yellow;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <nav>
    <ul>
      <li><a onclick="hideMenu('#submenuId1')">Link</a></li>
      <li><a onclick="hideMenu('#submenuId2')">Link</a></li>

    </ul>
  </nav>
</div>
<div id="submenuId1" class="hiddenMenu">
  <nav>
    <ul>
      <li>subMenuItem1</li>
    </ul>
  </nav>
</div>
<div id="submenuId2" class="hiddenMenu">
  <nav>
    <ul>
      <li>subMenuItem1</li>
    </ul>
  </nav>
</div>

In your else statement you are hiding it and then 800ms showing it again. — tshimkus, Jun 10 '19 at 20:31
@tshimkus But the `else` only runs if the specified DIV isn't already visible. — Barmar, Jun 10 '19 at 20:31
You shouldn't add the `$(document).mouseup()` handler every time you click on a menu. You end up with lots of duplicate handlers. — Barmar, Jun 10 '19 at 20:33

score 0 · Answer 1 · answered Jun 10 '19 at 20:53

$(menuId).is(":visible") is never returning true. The next time you click on the link, the $(document).mouseup() handler runs before the onclick handler runs. Since you're not clicking on the DIV, it hides the DIV. Then the onclick handler runs, it sees that the DIV is hidden, so it shows it again.

When detecting a click outside the DIV, you also need to exclude clicks on the menu titles.

You shouldn't add mouseup handler every time you call hideMenu(), as you create multiple handlers that all run the next time you click. Declare that event handler just once, and have it simply close the :visible menu.

function hideMenu(menuId) {
  if ($(menuId).is(":visible")) {
    $(menuId).hide();
  } else {
    $(".hiddenMenu:visible").hide();
    $(menuId).show('800');
  }

  console.log(menuId);
}

$(document).mouseup(function(e) {
  var div = $(".hiddenMenu:visible");
  if (!div.is(e.target) && div.has(e.target).length === 0 && !$(e.target).hasClass("menutitle")) {
    div.hide();
  }
});

body {
  margin: 0;
  padding: 0;
  background: #040921;
}

.container {
  width: 80px;
  height: 100vh;
  background: #263154;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.container nav ul li a {
  cursor: pointer;
}

#submenuId1 {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 80px;
  background: orange;
  display: none;
}

#submenuId2 {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 80px;
  background: yellow;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <nav>
    <ul>
      <li><a class="menutitle" onclick="hideMenu('#submenuId1')">Link</a></li>
      <li><a class="menutitle" onclick="hideMenu('#submenuId2')">Link</a></li>

    </ul>
  </nav>
</div>
<div id="submenuId1" class="hiddenMenu">
  <nav>
    <ul>
      <li>subMenuItem1</li>
    </ul>
  </nav>
</div>
<div id="submenuId2" class="hiddenMenu">
  <nav>
    <ul>
      <li>subMenuItem1</li>
    </ul>
  </nav>
</div>

Nothing is saved automatically across reloads. If you want to do that, you need to add code to do it using `localStorage`. — Barmar, Jun 10 '19 at 21:58
Hmm ... Thank you. Are there any other methods for closing a block when clicking outside it? — Olan Aodhan, Jun 10 '19 at 22:07
See https://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — Barmar, Jun 10 '19 at 22:08

Why does not the block closing work when the button is pressed again?

1 Answers1