Display none jquery не работает

jQuery & CSS-удалить / добавить дисплей: нет

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

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

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

12 ответов

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

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

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

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

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

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

используйте переключатель для отображения и скрытия.

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

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

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

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

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

согласно jQuery docu это общий способ «удалить» один раз установленное встроенное свойство стиля.

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Как я могу изменить свойство CSS display none или block С помощью jQuery?

Как я могу изменить свойство CSS display none или block С помощью jQuery?

14 ответов

У меня на странице есть загрузчик AJAX. Он скрыт с помощью CSS display: none; для начала, а затем показан во время процедуры AJAX — t.ajax_loader.show(‘explode’, <>, 1000); Я использую ‘explode’, потому что загрузчик не такой большой (из-за того, где я должен его поместить), и я хочу помочь.

У меня есть панель div где-то на моей странице, которая должна быть скрыта, когда размер окна становится слишком маленьким. Отлично работает с помощью этого css: #panel @media (max-width: 1000px) < #panel < display: none; >> Есть еще одно правило, которое отображает кнопку.

Правильный способ сделать это-использовать show и hide :

Альтернативный способ-использовать метод jQuery css :

Существует несколько способов достижения этой цели, каждый из которых имеет свою собственную цель.

1 .) Использовать inline , просто назначая элементу список дел

2 .) Для использования при настройке нескольких свойств CSS

3 .) Для динамического вызова по команде

4 .) Для динамического переключения между блоком и нет, если это div

Если отображение div по умолчанию блокируется, вы можете просто использовать .show() и .hide() или еще проще .toggle() для переключения между видимостью.

Другой способ сделать это с помощью метода jQuery CSS:

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

Я пытаюсь изменить ‘Display’ на ‘none’ с jQuery, но это не работает, или тогда я написал это неправильно? FIDDLE Код:

Привет, ребята, я сейчас работаю над онлайн-комиксом и борюсь со следующим кодом jquery. Jquery должен изменить мой код css с изображения #compscreen2 с display:none на display:block после того, как произойдет другая функция, но она, похоже, не работает, и я не могу понять, почему . Кажется.

.hide() не работает в Chrome для меня.

Это работает для сокрытия:

В моем случае я показывал / скрывал элементы формы в зависимости от того, был ли входной элемент пустым или нет, так что при скрытии элементов элемент, следующий за скрытыми, был перемещен, занимая его пространство, необходимо было сделать float: слева от элемента такого элемента. Даже при использовании плагина в качестве dependsOn необходимо было использовать float.

Это самый лучший способ.

В javascript году:

а в jquery году:

и вы можете использовать:

вы можете сделать это с помощью кнопки

Похожие вопросы:

Я новичок в использовании Jquery. В настоящее время элемент errorSummaryDiv не отображается. Я пытаюсь написать код, чтобы изменить элемент с display: none на display: block или просто полностью.

Как изменить свойство CSS display в JavaScript с display:none на display:normal для этих дивов? #hide_0 < display:none >#hide_1 < display:none >#hide_2 < display:none >#hide_3 < display:none >.

Есть ли какая-то разница между jQuery(‘#id’).show() and jQuery(‘#id’).css(display,block) и jQuery(‘#id’).hide() and jQuery(‘#id’).css(display,none)

У меня на странице есть загрузчик AJAX. Он скрыт с помощью CSS display: none; для начала, а затем показан во время процедуры AJAX — t.ajax_loader.show(‘explode’, <>, 1000); Я использую ‘explode’.

У меня есть панель div где-то на моей странице, которая должна быть скрыта, когда размер окна становится слишком маленьким. Отлично работает с помощью этого css: #panel @media.

Я пытаюсь изменить ‘Display’ на ‘none’ с jQuery, но это не работает, или тогда я написал это неправильно? FIDDLE Код:

Привет, ребята, я сейчас работаю над онлайн-комиксом и борюсь со следующим кодом jquery. Jquery должен изменить мой код css с изображения #compscreen2 с display:none на display:block после того.

Нажмите кнопку, когда свойство отображения изменится. пример, button click results-the first-img class display: block, Дисплей второго класса img: нет, дисплей третьего класса img: нет.

Как я могу переключиться с display: none на display: inline-block и вращаться одновременно с css? Вот что я пытаюсь сделать html

Это мой код , и работает он хорошо, но моя проблема заключается в файле css, я знаю display css свойства очень хорошо и как это работает, но ниже кода на самом деле это выпадающий код manu.

Источник

Видимость элемента в JavaScript и CSS. Свойство display: none и block

Довольно часто возникает необходимость узнать, является ли какой-либо объект видимым на странице. Как правило, решение упирается в получение информации о css-свойстве объекта display . Обычно мы проверяем на соответствие этого свойства значению block или none , однако, сейчас появились другие значения этого свойства, например, inline-block , flex , grid .

Проверка на стилевое свойство display: none

Если у вас для элемента явно назначено стилевое свойство display: none , то вы можете легко изменять это свойство на display: block или flex , или grid по необходимости. Что значит «явно назначено стилевое свойство»? Это подразумевает наличие атрибута style=»display: none» непосредственно в том теге, который вы хотите впоследствии отображать, как правило при клике на другом элементе, расположенном в непосредственной близости от скрытого.

Например, у вас есть такой код:

Кликните, чтобы узнать, что такое Lorem Ipsum?

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.

Минусом такого подхода является то, что явное назначение стилевого свойства в виде атрибута style=»display: none» бывает крайне редко в верстке. Чаще оно добавляется в коде JavaScript, и им же потом и удаляется.

Определяем свойство display, описанное во внешнем css-файле

Если же display: none установлен в css-стилях во внешнем файле или общих тегах

Кликните, чтобы узнать, откуда появился Lorem Ipsum?

Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, «Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32

Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 «de Finibus Bonorum et Malorum» Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.

Почему Lorem Ipsum используется?

Варианты значений css-свойства display

В таблице вы найдете варианты значений css-свойства display , которые можете использовать в скриптах и CSS.

Значение	Описание
block	Элемент рендерится браузером, как блочный
flex	Элемент рендерится, как гибкий со свойствами Flexbox-модели. Был добавлен в CSS3
inline	Элемент рендерится как строчный (inline)
inline-block	Элемент рендерится как строчно-блочный (inline-block)
inline-flex	Элемент рендерится, как гибкий, но с шириной, равной контенту. Был добавлен в CSS3
inline-grid	Элемент рендерится каккак контейнер-сетка, но без переноса строки до и после него.
inline-table	Элемент рендерится как таблица (подобно тегу ), без перевода строки до или после таблицы inline-grid Элемент рендерится, как контейнер-сетка list-item Элемент рендерится, как элемент списка ( ) none Элемент не отображается и не реагирует на события table Элемент рендерится, как блочная таблица (подобно тегу ), с переносом строки до и после таблицы) table-caption Элемент рендерится, как заголовок таблицы (подобно тегу ) table-cell Элемент рендерится, как ячейка таблицы (подобно тегам и ) table-column Элемент рендерится, как столбец ячеек (подобно ) table-column-group Элемент рендерится, как группа из одного или нескольких столбцов таблицы (подобно ) table-footer-group Элемент рендерится, как строка нижней части таблицы (подобно ) table-header-group Элемент рендерится, как строка для заголовочной части (шапки) таблицы (как ) table-row Элемент рендерится, как строка таблицы (как тег table-row-group Элемент рендерится, как группа строк таблицы, например, initial Устанавливает значение свойства по умолчанию. Например, для блочных элементов — block , для строчных — inline inherit Наследуется от родителя Изменение свойства display с none на block в CSS В CSS вы можете использовать для переключения видимости скрытый элемент checkbox (флажок) вместе с label, для которой можно менять значение пседоэлемента ::before или ::after . Причем в псевдоэлементе для label будет меняться только текст (Показать/Скрыть), а собственно показывать или скрывать мы будем элемент, следующий сразу за label . В примере это обычный div без атрибутов class или id, которые вы можете добавить самостоятельно. Работать CSS-код будет за счет применения родственного селектора в виде Источник How can I change CSS display none or block property using jQuery? How can I change CSS display none or block property using jQuery? 14 Answers 14 The correct way to do this is to use show and hide : An alternate way is to use the jQuery css method: There are several ways to accomplish this, each with its own intended purpose. 1.) To use inline while simply assigning an element a list of things to do 2.) To use while setting multiple CSS properties 3.) To dynamically call on command 4.) To dynamically toggle between block and none, if it’s a div some elements are displayed as inline, inline-block, or table, depending on the Tag Name If the display of the div is block by default, you can just use .show() and .hide() , or even simpler, .toggle() to toggle between visibility. Other way to do it using jQuery CSS method: In case you want to hide and show an element, depending on whether it is already visible or not, you can use toggle instead of .hide() and .show() .hide() does not work in Chrome for me. This works for hiding: and you can use: In my case I was doing show / hide elements of a form according to whether an input element was empty or not, so that when hiding the elements the element following the hidden ones was repositioned occupying its space it was necessary to do a float: left of the element of such an element. Even using a plugin as dependsOn it was necessary to use float. Источник Читайте также:  Жители дубаи не работают Оцените статью Вам также может понравиться Как в телевизоре убрать безопасный режим По умолчанию в телевизоре могут стоять задачи, которые Домашний кинотеатр. Улучшаем параметры Для того, чтобы улучшить качество изображения и звука Как починить наушники в случае их поломки Не у каждого человека в доме есть паяльник. Настраиваем и подключаем комнатную антенну Не получится просматривать цифровое кабельное телевидение Правообладателям Политика конфиденциальности Контакты