jQuery hide() метод do show element с дисплеем: none! Important

Question

У меня проблема.

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

.cls { 
    display:none !important; 
} 

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

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

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

Может ли кто-нибудь помочь мне в том, как скрыть этот элемент?

Answer 1

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

DEMO

Answer 2

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

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

.cls{ 
    display: none; 
} 

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

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

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

, а затем в вашем JavaScript,

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

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

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

Это поможет вам сохранить вашу разметку чистой и читаемый

Answer 3

! Important; удалите все правила и примените css desfined как ! Important;. Поэтому в вашем случае он игнорирует все правила и применяет дисплей: нет.

Так что это:

.cls { 
    display:none 
} 

См this also

Answer 4

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

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

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

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

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

Answer 5

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

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

Тогда в JavaScript:

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

Хорошая вещь, что вы также можете иметь этот код, чтобы скрыть его снова:

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

и это не имеет значения, сколько раз вы скрыть/показать, это будет еще работать