Hide dropdown with JS

Question

When hover over a div (Selector), a dropdown is displayed. When clicking in an element, a JS function is called and several tasks are performed. That's OK. My problem is that I want the dropdown to disappear after the click, but cannot use .style.display= "none" for example, since I want it to apperar when hovering again over Selector. I'm not familiar with JQuery, so feel more comfortable with plain JS.

function TheJSFunction(What) {
    //alert (What);

    // First try: remove classes to dropdown, and then add class 'dropdown-content' (vis: hidden and opacity 0):

    // document.getElementById("dc").className = '';
    // document.getElementById("dc").classList.add('dropdown-content');

    // Second try: set opacity to 0 (or visibility to hidden)
    // But then dropdown is not displayed again when hovering over Selector:

    //document.getElementById("dc").style.opacity = 0;
}

.Selector {
  display: inline;
  float: left;
  padding: 8px;
  background: #282828;
  color: #ffffff;
  width: 300px;
  text-align: center;
}

.Selector:hover {
  background-color: #800000;
  transition: all 0.5s ease;
}

.dropdown-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: #ff8080;
  margin-top: 8px;
  margin-left: -8px;
  width: 316px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.Selector:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
  transition: all 0.5s ease;
}

.dropdown-content .DD_content {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.dropdown-content .DD_content:hover {
  background-color: #ffb3b3;
  transition: all 1s ease;
}

    <div class="Selector">Lizards
      <div class="dropdown-content" id="dc">
        <div class="DD_content" onclick="TheJSFunction('New');">New Specie</div>
        <div class="DD_content" onclick="TheJSFunction('Edit');">Edit record</div>
      </div>
    </div>

Could you set `display: none` on click, and then undo that on mouse out? I _think_ that would work, as the latter would fire immediately after the former. — jhpratt, Apr 30 '18 at 19:42
Possible duplicate of [Can I disable a CSS :hover effect via JavaScript?](https://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript) — Hamms, Apr 30 '18 at 19:42

score 2 · Accepted Answer · answered Apr 30 '18 at 19:49

2

you can add onmouseover to div

<div class="Selector" onmouseover="reset()">Lizards
    <div class="dropdown-content" id="dc">
      <div class="DD_content" onclick="TheJSFunction('New');">New Specie</div>
      <div class="DD_content" onclick="TheJSFunction('Edit');">Edit record</div>
    </div>
  </div>

then add a function to reset opacity to 100

function reset() {
    document.getElementById("dc").style.opacity = 100;
}

answered Apr 30 '18 at 19:49

Sarpyjr

177
4

1

I would use style.display = "none" and style.display = "block". Works better – Sarpyjr Apr 30 '18 at 19:55

score 0 · Answer 2 · answered Apr 30 '18 at 19:46

To do this effectively, you will need to do a bit of JS to do that. You could either add a class or set the visibility property on click, wait for onmouseout event and then remove the class/property to reset it. This should work even for touch devices.

Example code:

var dropdown = document.querySelector(".dropdown-content");
dropdown.addEventListener("click", function() {
    dropdown.style.visibility = "hidden";
});
dropdown.addEventListener("mouseout", function() {
    dropdown.style.visibility = "";
});

EDIT:

As a bonus, you could easily just toggle the property in the same line. As these things cause a DOM reflow, it should mean that if it is controlled via CSS selectors it should not show back up. So simply just...

function ClickHandler(element) {
    element.style.visibility = "none";
    element.style.visibility = "";
}

score 0 · Answer 3 · answered Apr 30 '18 at 20:04

0

You need to add an event listener to override the opacity specified in the 'TheJSFunction' function

document.getElementsByClassName('Selector')[0].addEventListener("mouseover", function(){ 

        document.getElementById("dc").style.opacity=1;


        });

answered Apr 30 '18 at 20:04

richard2k17

1
2

thanks. It seems to be pretty similar to accepted answer: on click set opacity to 0 (or display to none), and on mouseover Selector, restore opacity (or display). – CMArg Apr 30 '18 at 20:29

Hide dropdown with JS

3 Answers3