jQuery hide() 方法使用 display:none !important 顯示元素

Question

我為一個元素分配了一個具有以下 CSS 的類：

.cls {
  display:none !important;
}

當我嘗試用 jQuery 顯示這個元素時

$(".cls").show();

它不起作用。

我怎樣才能隱藏這個元素？

Answer 1

$('.cls').attr('style','display:block !important');

演示

Answer 2

雖然很久以前就有人問過這個問題，但它仍然與新的編碼員/初學者相關。 通常，當您已經應用了一些使用!important屬性覆蓋display行為的類時，就會出現這種情況。

其他答案也與該問題相關，這是用不同方法實現相同目標的問題。 我建議使用同一個庫中已經可用的類（這里是引導程序）來實現它，而不是像現在我們大多數人使用引導程序類來構建布局那樣編寫自定義類。

<div id='container' class="d-flex flex-row align-items-center">
.....
</div>

如果您在上面的代碼中看到，我們正在使用d-flex類來設置此容器的顯示屬性。 現在，如果我嘗試使用show/hide此容器

$('#container').show()

或

$('#container').hide()

它不會按預期工作，因為

1. 由於d-flex已經在使用!important屬性
2. Jquery 的show()方法將display:block而不是display:flex到容器的 css 屬性。

所以我會推薦在這里使用hidden類。

顯示容器

$('#container').removeClass('hidden')

隱藏容器

$('#container').addClass('hidden')

Answer 3

2種方法，

1) 從.cls類中刪除!important ，

.cls{
   display: none;
}

但我認為，你會在其他地方使用它，所以它可能會導致回歸。

2）你可以做的是，有一個另一個類並切換它，

.cls-show{
  display: block !important;
}

然后在你的 javascript 中，

$('.cls').addClass(".cls-show");

然后當你需要再次隱藏它時，你可以，

$('.cls').removeClass('.cls-show');

這將幫助您保持標記的清潔和可讀性

Answer 4

！重要； 刪除所有規則並應用定義為!important的 css ； . 因此，在您的情況下，它會忽略所有規則並應用display:none 。

所以這樣做：

.cls {
  display:none
}

見這也

Answer 5

如果 CLS 類選擇器中唯一的屬性是顯示屬性，則可以執行此操作，而無需添加任何額外的類或修改內聯樣式。

向他們展示：

$('.cls').removeClass("cls").addClass("_cls");

要隱藏它們：

$('._cls').removeClass("_cls").addClass("cls");

Answer 6

剛剛有這個確切的問題，這是我首先做的，我向元素添加了另一個類，例如：

<div class="ui-cls cls">...</div>

然后在javascript中：

$('.ui-cls').removeClass('cls').show();

好消息是您還可以使用此代碼再次隱藏它：

$('.ui-cls').hide();

不管你隱藏/顯示多少次，它仍然有效