Question 316309 in Html Question posted in
Some basic documentation can be found here.

Html – Open the drop-down menu with multiple choices to click

When you click Press Me, a drop-down menu opens, and when you click it again or anywhere else in the window, it closes.

I also want to add this function to dropdown-arrow next to it, so that it is synchronized.

I tried to give dropdown-arrow onclick="myFunction()" aswell, but it didn’t work.

function myFunction() {
    document.getElementsByClassName('dropdown-content')[0].classList.toggle('show');
}
// Close dropdown if the user clicks on window
window.onclick = function(event) {
    if (!event.target.matches('#verify-name')) {
        var dropdowns = document.getElementsByClassName('dropdown-content');
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}
.buttons {
    display: flex;
    position: relative;
}
#dropdown-arrow {
    height: 20px;
}
.dropdown-content {
    display: none;
    position: absolute;
        padding: 14px; background-color: yellow;
}
.show {
    display: flex;
}
<div class="buttons">
    <div>
        <a id="verify-name" onclick="myFunction()">Press Me</a>
        <img id="dropdown-arrow" src="https://www.svgrepo.com/show/335062/dropdown.svg">

        <div class="dropdown-content">
            <span>Logout</span>
        </div>
    </div>
</div>
Tags:

2

Answers


  1. 0

    Add the onclick event to the dropdown-arrow in your HTML:

    <img id="dropdown-arrow" src="https://www.svgrepo.com/show/335062/dropdown.svg" onclick="myFunction()">

    Modify the window.onclick function to check for both verify-name and dropdown-arrow:

    window.onclick = function(event) {
    if (!event.target.matches('#verify-name') && !event.target.matches('#dropdown-arrow')) {
        var dropdowns = document.getElementsByClassName('dropdown-content');
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};

    With these changes, clicking either the "Press Me" link or the dropdown arrow will toggle the dropdown menu. Clicking anywhere else on the window will close it if it’s open.

    Login or Signup to reply.
  2. 0

    I can think of 2 ways to tackle your issue:

    1. Attaching a separate click event listener for the dropdown-arrow.
    2. Using the closest method to check if the clicked element is Press Me text or the .dropdown-arrow.

    Let me add the implementation of the second one. First one would be self-explanatory. In below code, I have replaced the window.onclick assignment with window.addEventListener('click', function() {...}) to avoid potential conflicts with other click event listeners and it is also the recommended way.

    function toggleDropdown() {
  document.querySelector('.dropdown-content').classList.toggle('show');
}
window.addEventListener('click', function(event) {
  const clickedElement = event.target;

  if (clickedElement.closest('#verify-name') || clickedElement.closest('#dropdown-arrow')) {
    // Clicked on "Press Me" or the dropdown-arrow
    toggleDropdown();
  } else {
    // Clicked outside the dropdown elements
    document.querySelectorAll('.dropdown-content.show').forEach(function(openDropdown) {
      openDropdown.classList.remove('show');
    });
  }
});
    .buttons {
  display: flex;
  position: relative;
}

#dropdown-arrow {
  height: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  padding: 14px;
  background-color: yellow;
}

.show {
  display: flex;
}
    <div class="buttons">
  <div>
    <a id="verify-name">Press Me</a>
    <img id="dropdown-arrow" src="https://www.svgrepo.com/show/335062/dropdown.svg">
    <div class="dropdown-content">
      <span>Logout</span>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search