Drop down menu doesn't comedown after display set to none-CodePudding

I have a drop down menu. I added a javascript addevent listener for the dropdown content to close when i click on an option. It works fine.

Javascript

const element = document.querySelector(".dropdown-content");


element.addEventListener("click", () => {
    
    element.style.display ="none";
    
});

  <div class="dropdown" id ="dropdown" >
  <button class="dropbtn" id ="dropbtn" >Select Trailer  <i class="icon ion-location"></i></button>
  
  <div class="dropdown-content" id ="dropdown-content">
    <a class = "drop" id ="drop" href="#">Option1<br></a> 
    <a class = "drop" id ="drop" href="#">Option2<br></a> 
  </div>
  
</div>

css

.dropbtn {
  background-color: #F6A695;
  color: white;
  padding: 16px;
  font-size: 18px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  padding-bottom:80px;
 
}

.dropdown-content {
   display: none; 
  position: absolute; 
  background-color: #f1f1f1;
  min-width: 142px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
   max-height:120px;
   overflow-y:scroll; 
}

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

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #F4929D;}

ISSUE:

The problem im facing is that when the dropdown content closes on click it wont open again , and it remains closed.

What i have tried :

I have tried changing the display to block when clicking on the drop down again, but it doesn't seem to work.

const element = document.querySelector(".dropdown-content");
const mainbutton = document.querySelector(".dropdown");

mainbutton.addEventListener("click", () => {
    
    element.style.display ="block";
    
});

CodePudding user response：

You can use the 'mouseenter' and 'mouseleave' event.

const element = document.querySelector(".dropdown-content");
const mainbutton = document.querySelector(".dropdown");

mainbutton.addEventListener("mouseenter", () => {
   
    element.style.display ="block";
    
});

mainbutton.addEventListener("mouseleave", () => {
    
    element.style.display ="none";
    
});

element.addEventListener("click", () => {
    
    element.style.display ="none";
    
});

.dropbtn {
  background-color: #F6A695;
  color: white;
  padding: 16px;
  font-size: 18px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  padding-bottom:80px;
 
}

.dropdown-content {
   display: none; 
  position: absolute; 
  background-color: #f1f1f1;
  min-width: 142px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
   max-height:120px;
   overflow-y:scroll; 
}

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

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #F4929D;}

<div class="dropdown" id ="dropdown" >
  <button class="dropbtn" id ="dropbtn" >Select Trailer  <i class="icon ion-location"></i></button>
  
  <div class="dropdown-content" id ="dropdown-content">
    <a class = "drop" id ="drop" href="#">Option1<br></a> 
    <a class = "drop" id ="drop" href="#">Option2<br></a> 
  </div>
</div>

CodePudding user response：

The answer Kirill posted was right but to add on, it worked perfectly when i added this code


const element = document.querySelector(".dropdown-content");
const element2 = document.querySelector(".dropbtn");

element2.addEventListener("mouseenter", () => {
   
    element.style.display ="block";
    
});


element.addEventListener("click", () => {
    
    element.style.display ="none";
    
});