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

以下是完成该操作的方法：

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

Answer 3

试试这个：

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

Answer 4

您只需将 css 属性 display 设置为 none on class .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');
});

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