0

it has been a while since i was here last time.

I have a problem with some html triggering a javascript function before it should.

The problem:

I am creating a menu, with the intend to close the menu when the mouse leaves the object, this is done with javascript and css, but the event is triggered before it should, in this example, it triggers when the mouse enters the second menu item, and it is a problem to reach the second, or even the third, menu item.

This is the html part:

<div class="w3-dropdown-click">
<button class="w3-button" onclick="showContent('menuAdministrator')">
Administrator
</button>
<div id="menuAdministrator" class="w3-dropdown-content w3-bar-block w3-card-4" onmouseout="showContent('menuAdministrator', true)">
<a href="./administrator-request-management.php" class="w3-bar-item w3-button">Request Management</a>
<a href="./administrator-maintenance-mode.php" class="w3-bar-item w3-button">Maintenance Mode</a>
<a href="./administrator-ban-list.php" class="w3-bar-item w3-button">Ban List</a>
</div>
</div>

This is the Javascript part:

function showContent(id, mOut = false) {
  var ids = new Array ("menuUser", "menuModerator", "menuAdministrator");
  if (mOut) {
  document.getElementById(id).style.display = "none";
  } else {
  var length = ids.length;
  j = 0;
  for (j = 0; j < length; j++) {
  var close = ids[j];
  if (document.getElementById(close)) {
  if (id != close) {
  document.getElementById(close).style.display = "none";
  } else {
  document.getElementById(close).style.display = "block";
  }
  }
  }
  }
}

What I have now I hope that someone could provide some clarity on the matter, so thanks in advance.

tom
  • 73
  • 8
Ralph Andreasen
  • 103
  • 1
  • 1
  • 10
  • (Duplicate is jQuery-specific, but the explanation is still the same - you are using the wrong type of event here for what you want to achieve.) – CBroe Feb 08 '18 at 12:05
  • It was solved with a mouseleave() event, so i will mark it a duplicate :) – Ralph Andreasen Feb 08 '18 at 13:03

0 Answers0