I have this piece of code:

function dropdown() {
  let dropdownText = document.querySelector(".dropdown-button");
  let item = document.querySelector(".dropdown-items").getElementsByTagName("div")[0];

  var aux = dropdownText.innerHTML;
  dropdownText.innerHTML = item.innerHTML;
  item.innerHTML = aux;
  
  document.querySelector(".dropdown-items").style.display = "none";
}

.btn {
  width: 150px;
  height: 30px;

  border-radius: 5px;
  border: none;
  box-shadow: 0 3px 1px 0 black;

  text-align: center;
  line-height: 30px;

  color: black;

  font-family: Consolas, monaco, monospace;
}

.dropdown {
  margin: 0 50px 0 50px;
  position: relative;
}

.dropdown-items {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-button {
  background: red;
}

.dropdown:hover .dropdown-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dropdown-button {
  background: orange;
  font-size: 15px;
  color: white;
}

.dropdown-button:hover {
  cursor: pointer;
}

.dropdown-items div {
  margin-top: 5px;

  transform: scaleX(90%);
  height: 20px;
  line-height: 20px;
  background: lightgray;
  padding: 5px 0 5px 0;
  text-align: center;
}

.dropdown-items div:hover {
  cursor: pointer;
  background: gray;
}

<div >
    <button  type="button">Terminate</button>
    <div >
        <div  onclick="dropdown();">Interrupt</div>
    </div>
</div>

As you can see, I am trying to make a dropdown. I also want to make it so that when I click an option in the dropdown, the dropdown items stop showing as the option has been selected. That's why I added the line document.querySelector(".dropdown-items").style.display = "none"; in the JS file as I thought the .dropdown:hover .dropdown-items part of my CSS would change back the display of those elements to visible when hovering again, but when hovering again after the first click, the dropdown does not show anymore. Why is happening and how can I fix this?

CodePudding user response：

Inline styles override any stylesheet styles, as they have maximum CSS specificity.

Instead of working with inline styles (el.style.display = "none"), work with a CSS class open that you toggle. Also don't make use of inline event listeners like onclick. Those are insecure and widely considered bad practice for a whole bunch of reasons. Use addEventListener instead.

// get all the dropdowns in a NodeList
const dropdowns = document.querySelectorAll('.dropdown');

// iterate over the list
for (const dropdown of dropdowns) {
  // for each dropdown, add a mouseenter and mouseleave listener
  dropdown.addEventListener('mouseenter', function(event) {
    dropdown.classList.add('open');
  });
  
  dropdown.addEventListener('mouseleave', function(event) {
    dropdown.classList.remove('open');
  });
  
  // Now add a click listener to each <div >
  // that transfers the text and closes the dropdown
  dropdown.querySelector('.dropdown-items').addEventListener(
    'click',
    function(event) {
      this.previousElementSibling.textContent = this.textContent;
      dropdown.classList.remove('open');
    }
  );
}

.btn {
  width: 150px;
  height: 30px;

  border-radius: 5px;
  border: none;
  box-shadow: 0 3px 1px 0 black;

  text-align: center;
  line-height: 30px;

  color: black;

  font-family: Consolas, monaco, monospace;
}

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-items {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-button {
  background: red;
}

.dropdown.open .dropdown-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dropdown-button {
  background: orange;
  font-size: 15px;
  color: white;
}

.dropdown-button:hover {
  cursor: pointer;
}

.dropdown-items div {
  margin-top: 5px;

  transform: scaleX(90%);
  height: 20px;
  line-height: 20px;
  background: lightgray;
  padding: 5px 0 5px 0;
  text-align: center;
}

.dropdown-items div:hover {
  cursor: pointer;
  background: gray;
}

<div >
    <button  type="button">Terminate</button>
    <div >
        <div >Interrupt</div>
    </div>
</div>
<div >
    <button  type="button">Terminate</button>
    <div >
        <div >Whatever</div>
    </div>
</div>
<div >
    <button  type="button">Terminate</button>
    <div >
        <div >Another one</div>
    </div>
</div>
<div >
    <button  type="button">Terminate</button>
    <div >
        <div >Here we go</div>
    </div>
</div>