CODEWITHSUNDEEP
javascriptjquerycss
Sinan Samet
Sinan Samet

Reputation: 6742

Dropdown doesn't open after closing

I made a dropdown menu with css but it doesn't close when you click on it. So I added this function to it:

$(".map-button li ul li").on("click", function(){
    $(this).parent().hide();
});

It closes when I click on it but it doesn't open anymore when I hover.

This is what I use to open it when I hover on it with CSS:

.map-button li:hover ul{
  display: block;
  opacity: 1;
  visibility: visible;
}

Menu structure:

<ul class="map-button">
  <li>Choose item
    <ul style="display: none;">
        <li data-id="1">Item 1</li>
        <li data-id="2">Item 2</li>                 
    </ul>
   </li>
</ul>

Upvotes: 0

Views: 112

Answers (3)

Frogmouth
Frogmouth

Reputation: 1818

Consider to use all JS implementation (like @Beri suggest to you), but if you want to use CSS :hover to show list:

Add rule in CSS:

.map-button > li ul{
    display:none;
}
.map-button > li:hover ul{
  display: block;
}

and remove style="display:block" in HTML

<ul class="map-button">
  <li>Choose item
    <ul>
        <li data-id="1">Item 1</li>
        <li data-id="2">Item 2</li>                 
    </ul>
   </li>
</ul>

JS is ok.

Test it

Upvotes: 0

Beri
Beri

Reputation: 11600

You need to add another handler:

 $(".map-button li").mouseenter(function(){
    $(".map-button li ul").show(); 
  });

  $(".map-button li").mouseleave(function(){
    $(".map-button li ul").hide(); 
  });

Upvotes: 2

jgillich
jgillich

Reputation: 76189

jQuery hide() sets display: none, but you need to set visibility: hidden:

$(this).parent().css({ visibility: 'hidden' });

Upvotes: 0

Related Questions