jQuery & CSS-удалить / добавить отображение: нет

У меня есть div с этим классом :

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

и я хотел бы с помощью некоторых методов jQuery удалить этот дисплей:none; (так что div будет показан) и затем добавить его снова (так что div будет тень).

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

12 93
css jquery

12 ответов:

скрыть div

$('.news').hide();

или

$('.news').css('display','none');

показать div:

$('.news').show();

или

$('.news').css('display','block');
148

jQuery предоставляет вам:

$(".news").hide();
$(".news").show();

затем вы можете легко показать и скрыть элемент(ы).

67

В JavaScript: 

getElementById("id").style.display = null;

в jQuery:

$("#id").css("display","");
14

Итак, позвольте мне дать вам пример кода:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

ссылка будет триггером, чтобы показать div при нажатии. Так что ваш Javascript будет:

$('.trigger').click(function() {
   $('.news').toggle();
});

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

Edit: Я вижу, что люди выше рекомендуют использовать .show и .hide для этого. .toggle позволяет делать как с одним эффектом. Так что это круто.

12

используйте переключатель, чтобы показать и скрыть.

$('#mydiv').toggle()

Проверьте рабочий пример на http://jsfiddle.net/jNqTa/

11

Я бы предложил добавить класс для отображения / скрытия элементов:

.hide { display:none; }

а затем использовать jquery .toggleClass() Показать/Скрыть элемент:

$(".news").toggleClass("hide");
7

jQuery .выставка и. скрыть () функции, вероятно, ваш лучший выбор.

6

единственный способ удалить встроенный "display:none" через css-api jQuery-это сбросить его с пустой строкой (null не работает кстати!!).

согласно документу jQuery, это общий способ "удалить" однократно установленное свойство встроенного стиля.

$("#mydiv").css("display","");

или

$("#mydiv").css({display:""});

должен сделать трюк правильно.

IMHO в jQuery отсутствует метод, который можно было бы назвать "unhide" или "reveal", который вместо того, чтобы просто установить другое свойство встроенного стиля, отменяет отображение значения правильно, как описано выше. Или, может быть,hide() должен хранить начальное встроенное значение и show() следует восстановить...

6

вы не даете нам много информации, но в целом это может быть решением проблемы:

$("div.news").css("display", "block");
5

по какой-то причине toggle не работал со мной и получил ошибку: "uncaught TypeError toggle не является функцией". на Проверить элемент в браузере. Поэтому я использовал следующий код и он начал работать на меня.

$(".trigger").click(function () { $('.news').attr('style', 'display:none'); }

используется файл сценария jquery с версией: 'jquery-2.1.3.минута.js".

4

если у вас есть много элементов, которые вы хотели бы .hide() или .show(), вы собираетесь тратить много ресурсов, чтобы делать то, что вы хотите - даже если использовать .hide(0) или .show(0) - параметр 0-это длительность анимации.

в противоположность прототип.js.hide() и .show() методы, которые используются только для управления атрибутом отображения элемента,jQueryреализация является более сложной и не рекомендуется для большого количества элементы.

в этом случае вы должны, вероятно, попробовать .css('display','none') скрывать и .css('display','') показать

.css('display','block') следует избегать, особенно если вы работаете со встроенными элементами, строками таблицы (фактически любыми элементами таблицы) и т. д.

3

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

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

замените встроенный блок предпочтительным методом отображения по вашему выбору и используйте jquerys addclass https://api.jquery.com/addclass/ и removeclass https://api.jquery.com/removeclass/ вместо show / hide, если обратная совместимость не является проблемой, вы можете использовать такие атрибуты.

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

и использовать jquerys attr ()http://api.jquery.com/attr/ чтобы показать и скрыть элемент.

какой бы метод вы ни предпочитали, он позволяет легко реализовать анимацию css3 при отображении / скрытии элементов таким образом

1