У меня есть div с этим классом:
.news{
width:710px;
float:left;
border-bottom:1px #000000 solid;
font-weight:bold;
display:none;
}
И я бы хотел, чтобы некоторые методы jQuery удаляли этот экран: 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()
Функции jQuery.show() и .hide(), вероятно, лучше всего.
Я предлагаю добавить класс для отображения/скрытия элементов:
.hide { display:none; }
а затем используйте jquery . toggleClass(), чтобы показать/скрыть элемент:
$(".news").toggleClass("hide");
Вы не даете нам много информации, но в целом это может быть решением:
$("div.news").css("display", "block");
Единственный способ удалить встроенный "display: none" через jQuery css-api - сбросить его с пустой строкой (null НЕ работает btw!!).
В соответствии с документом jQuery это общий способ "удалить" однократно заданное свойство встроенного стиля.
$("#mydiv").css("display","");
или
$("#mydiv").css({display:""});
должен правильно выполнить трюк.
IMHO существует метод, отсутствующий в jQuery, который можно было бы назвать "unhide" или "показывать", который вместо того, чтобы просто устанавливать другое свойство встроенного стиля, неправильно отображает отображаемое значение, как описано выше. Или, возможно, hide() должно сохранить начальное значение inline и show() должно восстановить это...
По какой-то причине toggle не работал со мной и получил ошибку: "uncaught typeerror toggle не является функцией". проверять элемент в браузере. Поэтому я использовал следующий код, и он начал работать для меня.
$(".trigger").click(function () {
$('.news').attr('style', 'display:none');
}
Используется файл jquery script с версией: "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') следует избегать, особенно если вы работаете с встроенными элементами, строками таблицы (фактически любыми элементами таблицы) и т.д.
Рассматривая прозорливый комментарий к лучшему ответу, вы можете добавить либо атрибут, либо класс, чтобы отображать/скрывать элементы с свойствами отображения, которые отличаются от того, что обычно имеет, если ваш сайт нуждается в обратной совместимости, я бы предложил создать класс и добавить/удалить чтобы показать/отобразить элемент
.news-show {
display:inline-block;
}
.news-hide {
display:none;
}
Замените встроенный блок на предпочтительный способ отображения по вашему выбору и используйте jquerys addclass https://api.jquery.com/addclass/ и removeeclass 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 при отображении/скрытии элементов таким образом