Click to close menu - multiple instances

Question

Can I have two instances of this on the same page for two drop downs? Could I just copy the code and change the class names to match? I have tried and I can't get it to work.

I can get this menu to open up just fine, but when I add the script to check for the click outside the menu it only works in a small portion below my profile avatar.

It's almost like I can only click on the area of the main div that is not being used by the div inside of it.

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// ****REMOVE SCRIPT BELOW  AND IM ABLE TO OPEN THE MENU CLICKING ON THE PICTURE-----ADD THIS SCRIPT AND IT ONLY ALLOWS THE ME TO OPEN MENU CLICKING BELOW THE PICTURE

//*****Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.check')) {

    var dropdowns = document.getElementsByClassName("navContent");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

#userAcct {
  display: inline-block;
  float: right;
  margin-right: 15px;
  height: 40px;
  width: 50px;
}

.user-img {
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.user-img img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  padding: 0;
  margin: 0px;
}

.navContent {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #06dd2a;
  width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: none;
}

.navContent a {
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  margin: 5px;
  color: #666666;
  font-weight: bold;
}

.navContent a:hover {
  background-color: #666666;
  color: #06dd2a;
}

.show {
  display: block;
}

<!-- user account photo and nav -->
<div id="userAcct" class="check" onclick="myFunction()">

  <div class="user-img"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg">
    <i class="fa fa-caret-down" aria-hidden="true"></i></div>

  <!-- link area -->
  <div id="myDropdown" class="navContent">
    <a href="index.php?action=logout">Log Out</a>
  </div>

</div>

score 0 · Answer 1 · answered Sep 11 '18 at 14:52

You were missing event.stopPropagation(); in the myFunction method. So your method will be like

function myFunction (event) {
event.stopPropagation();
  document.getElementById("myDropdown").classList.toggle("show");
}

https://jsfiddle.net/zr9mqpsk/3/

Thanks

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
document.getElementById("userAcct").addEventListener("click", function (event) {
event.stopPropagation();
  document.getElementById("myDropdown").classList.toggle("show");
});


// ****REMOVE SCRIPT BELOW  AND IM ABLE TO OPEN THE MENU CLICKING ON THE PICTURE-----ADD THIS SCRIPT AND IT ONLY ALLOWS THE ME TO OPEN MENU CLICKING BELOW THE PICTURE

//*****Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.check')) {

    var dropdowns = document.getElementsByClassName("navContent");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

#userAcct {
  display: inline-block;
  float: right;
  margin-right: 15px;
  height: 40px;
  width: 50px;
}

.user-img {
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.user-img img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  padding: 0;
  margin: 0px;
}

.navContent {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #06dd2a;
  width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: none;
}

.navContent a {
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  margin: 5px;
  color: #666666;
  font-weight: bold;
}

.navContent a:hover {
  background-color: #666666;
  color: #06dd2a;
}

.show {
  display: block;
}

<!-- user account photo and nav -->
<div id="userAcct" class="check">

  <div class="user-img"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg">
    <i class="fa fa-caret-down" aria-hidden="true"></i></div>

  <!-- link area -->
  <div id="myDropdown" class="navContent">
    <a href="index.php?action=logout">Log Out</a>
  </div>

</div>

Serg Chernata · Accepted Answer · 2018-09-11T14:58:49.773

The problem lies within event propagation. A good explanation can be found here. In your example, when you click on the image, the menu is shown and the event keeps bubbling up, triggering your window.onclick, closing the menu immediately. event.stopPropagation(); prevents that.

Also, I used a combination of classes document.getElementsByClassName("navContent show"); because we don't really want any menu. We want a menu that is currently being shown and needs to be closed.

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(event) {
  event.stopPropagation();
  document.getElementById("myDropdown").classList.toggle("show");
}

// ****REMOVE SCRIPT BELOW  AND IM ABLE TO OPEN THE MENU CLICKING ON THE PICTURE-----ADD THIS SCRIPT AND IT ONLY ALLOWS THE ME TO OPEN MENU CLICKING BELOW THE PICTURE

//*****Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {

  var dropdowns = document.getElementsByClassName("navContent show");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
  }

}

#userAcct {
  display: inline-block;
  float: right;
  margin-right: 15px;
  height: 40px;
  width: 50px;
}

.user-img {
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.user-img img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  padding: 0;
  margin: 0px;
}

.navContent {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #06dd2a;
  width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: none;
}

.navContent a {
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  margin: 5px;
  color: #666666;
  font-weight: bold;
}

.navContent a:hover {
  background-color: #666666;
  color: #06dd2a;
}

.show {
  display: block;
}

<!-- user account photo and nav -->
<div id="userAcct" class="check" onclick="myFunction(event)">

  <div class="user-img"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg">
    <i class="fa fa-caret-down" aria-hidden="true"></i></div>

  <!-- link area -->
  <div id="myDropdown" class="navContent">
    <a href="index.php?action=logout">Log Out</a>
  </div>

</div>

Click to close menu - multiple instances

2 Answers2