單擊按鈕時如何刪除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");
});