单击按钮时如何删除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

您只需要在应用于ul元素的类.dropdown-menu css属性display设置为none即可。

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");
});