单击按钮时如何删除css部分

Question

当我点击按钮时，我需要从导航栏中删除此css部分：

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

我试过这样的事情：

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

但它不起作用。我希望有一个响应式导航栏菜单，当它崩溃时，从该视图中删除下拉列表。

Answer 1

你试过removeClass吗？

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

如果要从DOM中删除元素

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

Answer 2

您只需将css属性display设置为应用于none元素的课程.dropdown-menu上的ul。

ul.nav li.dropdown:hover在这里没有任何相关性，因为它们被用作元素定位器并且没有应用display:none。

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

要删除整个css属性，

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

Answer 3

实现此目的的方法不止一种，但您可以通过在单击按钮时更改css来实现此目的

以下是您将如何实现这一目标：

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

Answer 4

试试这个：

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