CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Negar
Negar

Reputation: 87

hide drop down menu after clicking doesn't show it after rehover

my menu items don't redirect to another page, so after clicking them they don't hide. I can hide them using javascript or jquery, but they hide forever. I've tried every single suggestion out there but none of them work for me. this is my html:

    <nav>
      <ul>
        <li class="windows"><a href="#">Windows</a>
          <ul>
            <li><a href="#" class="tile">Tile</a></li>
            <li><a href="#" class="closeAll">Close all</a></li>
          </ul>
        </li>
      </ul>
    </nav>

my css:

     nav ul ul {
       display: none;
       position: absolute;
       top: 100%;
       z-index: 1003;
     }

     nav ul li:hover > ul {
       display: block;
       height: auto;
     }

and my javascript for tile:

    tileObject = $('a.tile');
    tileObject.click(function () {
      $('.windows ul').hide();
      tileAction();
    });

Upvotes: 2

Views: 1632

Answers (3)

Iv&#225;n Rodr&#237;guez Torres
Iv&#225;n Rodr&#237;guez Torres

Reputation: 4451

If you hide your menu using $('.windows ul').hide(); you will need to do a $('.windows ul').show();(or smething equivalent) to display it again.

As $('.windows ul') will be hidden. You will need do bind the event to another element, for example 

$('li.windows').click(function(){
    $('.windows ul').show()
});`

--EDIT--

For that effect you don't need javascript. Check the fiddle. Just use the selector :hover. Then, if you want to do some actions using JS, just use the hover event. Take a look to the docs

--EDIT 2--

I got it now. Check this. You need to unbind the hover event just before hide the element. Then after you hide the element you bind it again.

Upvotes: 2

Ivin Raj
Ivin Raj

Reputation: 3429

You can try this one:

$(document).ready(function(){
    $("li a.tile").click(function(){
        $("body").off("hover", "li.windows");
        $("nav ul li ul").hide();
        $("li.windows").hover(function(){
            $("nav ul li ul").show();
        });
    });


});

DEMO

Upvotes: 0

Vasil Indzhev
Vasil Indzhev

Reputation: 695

If you HIDE and element then you need to SHOW it back again. First of all you have top:100% in your css and you dont need this.

Upvotes: -1

Related Questions