How to properly show an element after applying display:none with jQuery

Question

I'm running into a really tough issue where I'm unable to trigger a dropdown menu after adding display:none via a click event. I previously tried adding it back with a hover event but that seemed to trigger all the time in certain browsers so I've abandoned that and am completely stuck. With the following code, how would I properly show the dropdown once again after the display property has been switched.

$(document).ready(function() {
    $('li.active ul.sub-menu.dropdown a').click(function() { 
        if($("li.active ul.sub-menu.dropdown").css("display", "block")){
           $("li.active ul.sub-menu.dropdown").hide();
        }
    });
})

Apologies for asking a similar question earlier but I didn't really understand the problem before. If I'm out of line, I apologize but I'm really stuck. Any help is greatly appreciated.

Answer 1

Have you tried to just use .toggle() ?

$(document).ready(function() {
    $('li.active ul.sub-menu.dropdown a').click(function() { 
        $("li.active ul.sub-menu.dropdown").toggle();
    });
})

It automatically checks if the element is visible and then toggles the display property.

Answer 2

Try to use show() function:

$(document).ready(function() {
    $('li.active ul.sub-menu.dropdown a').click(function() { 
        if($("li.active ul.sub-menu.dropdown").css("display", "block")){
           $("li.active ul.sub-menu.dropdown").hide();
        }
       else if($("li.active ul.sub-menu.dropdown").css("display", "none")){
           $("li.active ul.sub-menu.dropdown").show();
    });
});

Answer 3

I think, in general, it's better to do this stuff by adding classes in css. You can do something like this:

$(document).ready(function() {
$('li.active ul.sub-menu.dropdown a').click(function() { 
    $("li.active ul.sub-menu.dropdown").toggleClass("show");
});
});

and in css:

.show {
  display:block;
}

Of course, using .show() and .hide() are also viable. It just gives you less control.