How can I remove a css portion when a button is clicked

Question

I need to remove this css portion from a navbar-collapse when I click a button:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

I tried something like this:

$("#toggleButton").click(function()
{
   $(".navbar-collapse").remove("ul.nav","li.dropdown","ul.dropdown-menu");
});

But it doesn't work. I want to have a responsive navbar menu and when it collapse remove the dropdowns from that view.

Answer 1

Have you tried removeClass?

$(".navbar-collapse").removeClass("nav dropdown dropdown-menu");

If you want to remove the elements from the DOM

$(".nav, .dropdown, .dropdown-menu").remove();

Answer 2

You simply need to just set css attribute display to none on class .dropdown-menu applied to ul element.

ul.nav li.dropdown:hover doesn't have any relevancy here since they are used as an element locator and does not have display:none applied to them.

$("#toggleButton").click(function()
{
    $('ul.dropdown-menu').css('display','none');
});

To remove the entire css attributes,

$("#toggleButton").click(function()
{
    $('ul.dropdown-menu').removeAttr('style');
});

Answer 3

There's more than one way to accomplish this but you can do it by changing the css when you click the button

Here's how you would accomplish that:

$("#toggleButton").click(function()
{
   $("ul.nav li.dropdown:hover > ul.dropdown-menu").css({"display": "none"});
});

Answer 4

Try this :

$("#toggleButton").click(function(){
   $(".navbar-collapse").remove("ul.nav li.dropdown > ul.dropdown-menu");
});