Using 'hide' and 'show' in a div

Question

Using 'hide' and 'show' in a div

Navigation

#1 by (1 votes)

0

I have a div that when I click on it it shows and hides an ul. With the code like this:

<ul class="homeMenuItens">
        <li>
            <div pagina='/produtos/incendio' class="homeMenuPai">Incendio</div>
            <ul id="incendio" class="homeMenuFilhos" style="display:none">
                <li  pagina='paginaSYS' onclick='window.location=\"/paginaSYS\"'>tituloMenuSYS</li>
            </ul>
        </li>
    </ul>

Jquery looks like this:

$(".homeMenuPai").click(function() {
    $(".homeMenuFilhos").css('display','none');
    if($(this).parent().find(".homeMenuFilhos").css('display') == 'none'){
        $(this).parent().find(".homeMenuFilhos").show();
    }
    else{
        $(this).parent().find(".homeMenuFilhos").hide();
    }    

});

It's working, so I click on the Title menu, for example, it shows the items below. The problem is that if I click on the Div more than once, it does not hide the items. It only hides when I click on the other divs.

The structure is like this div TITLE UL UL WITH ITEMS li ITEM LISTING

I have 4 equal divs

In the image below it shows the 4 main menus, if I click on 2, the 1 closes, but if I click on the 1 again to close, it does not close.

html jquery css

asked by anonymous 08.05.2014 / 20:06

1 answer

Connection with MySQL in Roundcube Deprecation Warning - Compass Unsemantic

score 1 · Accepted Answer

The problem is that you are setting all elements .homeMenuFilhos with display = none and then verifying that it is display == none , that is, if will always be true. Remove alias:

$(".homeMenuPai").click(function() {
    //remova esta linha --> $(".homeMenuFilhos").css('display','none');
    if($(this).parent().find(".homeMenuFilhos").css('display') == 'none'){
        $(this).parent().find(".homeMenuFilhos").show();
    }
    else{
        $(this).parent().find(".homeMenuFilhos").hide();
    }    

});

Or if you want to hide all others and display only the current one do so:

$(".homeMenuPai").click(function() {

   if($(this).parent().find(".homeMenuFilhos").css('display') == 'none'){
        $(".homeMenuFilhos").css('display','none');
        $(this).parent().find(".homeMenuFilhos").show();
   }
   else{
        $(this).parent().find(".homeMenuFilhos").hide();
   }    

});