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

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

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

И я бы хотел, чтобы некоторые методы jQuery удалили этот display: none; (так будет отображаться div), а затем добавить его снова (так что div будет затенять).

Как мне это сделать? ура

Чтобы скрыть div

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

или

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

и показать div:

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

или

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

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

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

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

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

<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 обрабатывать стили для скрытия и отображения элементов.

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

В JavaScript:

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

В jQuery:

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

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

$('#mydiv').toggle()

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

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

.hide { display:none; }

а затем используйте jquery .toggleClass (), чтобы показать / скрыть элемент:

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

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

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

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

или

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

должен работать правильно.

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

Функции jQuery .show () и .hide (), вероятно, являются вашим лучшим выбором.

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

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

По какой-то причине у меня не работало переключение, и я получил сообщение об ошибке uncaught type error toggle is not a functionпри проверке элемента в браузере. Итак, я использовал следующий код, и он начал работать для меня.

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

Используемый файл сценария jquery jquery-2.1.3.min.js.

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

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

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

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

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

.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 при отображении / скрытии элементов таким образом.

Использование show()добавок display:blockвместо display:hideних может привести к поломке.

Чтобы этого избежать, вы можете создать класс со свойством display:noneи переключать этот класс для этого элемента с помощью toggleClass().

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

Ни в одном из ответов об этом не сказано.