Метод jQuery hide() показывает элемент с дисплеем: none! important

Я назначил элемент класс, который имеет следующий CSS:

.cls {
  display:none !important;
}

Когда я пытаюсь показать этот элемент с помощью jQuery

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

Это не работает.

Как я могу скрыть этот элемент?

Ответ 1

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

DEMO

Ответ 2

2 способа сделать это,

1) Удалите !important из класса .cls,

.cls{
   display: none;
}

Но я предполагаю, что вы использовали бы это в другом месте, чтобы он мог вызвать регресс.

2) То, что вы могли бы альтернативно сделать, это иметь другой класс и переключать его,

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

И затем в вашем javascript,

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

Затем, когда вам нужно скрыть его снова, вы можете,

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

Это поможет вам сохранить свою разметку чистой и удобочитаемой.

Ответ 3

! important; удалите все правила и примените css desfinined как ! important;. Поэтому в вашем случае он игнорирует все правила и применяет display: none.

Сделайте так:

.cls {
  display:none
}

Смотрите это также

Ответ 4

Если единственным свойством в селекторе класса CLS является отображение, вы можете сделать это и не нужно добавлять какие-либо дополнительные классы или изменять встроенный стиль.

Чтобы показать их:

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

Чтобы скрыть их:

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

Ответ 5

Просто эта точная проблема, вот что я сделал во-первых, я добавил еще один класс к элементу, например:

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

Затем в javascript:

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

Самое приятное, что вы также можете снова вызвать этот код:

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

и неважно, сколько раз вы скрываете/показываете, он все равно будет работать