Критические изменения jQuery 3.0 в hide() и show()
Show() и hide() были упрощены (ну, их внутренняя реализация), и существующий код, который вы написали, который их использует, может больше не работать.
Зачем ломать такую простую вещь?!
Только прочитав их пост, я понял, что их работа не так проста. Есть несколько пограничных случаев, на которые нет простых ответов.
Проблема №1: они не отвечают
Когда вы вызываете show() для элемента, отображаемое значение CSS вставляется прямо в атрибут стиля элемента. Проблема возникает, если элемент может иметь другое отображаемое значение в зависимости от другого фактора, такого как добавление класса или вступление в силу медиа-запроса.
.child должно иметь «отображаемое» значение «блокировать». Но поскольку jQuery show() помещает отображаемое значение в атрибут style, display: inline переопределяет это значение.
В приведенной выше записи экрана разработчик хотел, чтобы div.child имело значение display: block .
Однако jQuery помешал этому, когда вызов show() установил display: inline в атрибуте style элемента, связав руки разработчику.
Источники:
- https://github.com/jquery/jquery/issues/1767
- https://jsfiddle.net/jinglesthula/ZttLJ/
Проблема №2: они снижают производительность
Как это может повлиять на производительность? По сути, jQuery должен отслеживать текущее дерево CSS, что дорого обходится. Пол Айриш обнаружил, что это самое большое узкое место при загрузке визуального редактора Википедии. Он поднял важный вопрос:
В сторону: теперь, когда я смотрю, это магическое поведение не имеет особого смысла. Кажется, есть два пограничных случая, из-за которых jQuery наказывает производительность каждого приложения:0003
- div { display:none; } определено, и пользователь хочет переопределить его с помощью show()
- Пользователь имеет пользовательское отображаемое значение, определенное во встроенном стиле.
Стоит ли включать поддержку этих двух пограничных случаев в один из самых простых на вид API jQuery, чтобы быть самым узким местом в этом редакторе?
Источник: https://github.com/jquery/jquery.com/issues/88
В какой ситуации jQuery 3.0 нарушает функции hide() и show()?
Если у вас есть элементы в таблице стилей, для которых установлено значение display: none , метод .show() больше не будет переопределять это. Таким образом, самое важное правило для перехода на jQuery 3.0 заключается в следующем: не используйте таблицу стилей для установки значения по умолчанию display: none, а затем пытайтесь использовать .show() или любой другой метод, отображающий элементы, например .slideDown() и .fadeIn() — чтобы сделать его видимым.
Проверьте следующий JSFIddle: https://jsfiddle.net/xwvzkx9y/2/
slideToggle не работает, поскольку display: none задается с помощью класса.
Поскольку JSFiddle ссылается на край jQuery (3.
0), slideToggle больше не работает, поскольку элемент имеет класс «скрыть», который jQuery больше не будет переопределять. Удаление «скрыть» исправляет это, но элемент больше не скрыт по умолчанию. Замена класса «скрыть» на display: none в элементе — еще одно одобренное решение.
Хорошо. Что мне делать вместо этого?
Что ж, они собираются оставить show() и hide() , но убрали дорогостоящие вызовы, которые выполнялись в некоторых пограничных случаях. Из сообщения в блоге:
Если вам нужно, чтобы элемент был скрыт по умолчанию, лучший способ — добавить к элементу имя класса, например «скрытый», и определить этот класс для отображения: нет в таблице стилей. Затем вы можете добавить или удалить этот класс, используя методы jQuery .addClass() и .removeClass() для управления видимостью. В качестве альтернативы вы можете вызвать обработчик .ready() .hide() для элементов перед их отображением на странице. Или, если вам действительно необходимо сохранить таблицу стилей по умолчанию, вы можете использовать .
css(«display», «block») (или соответствующее отображаемое значение), чтобы переопределить таблицу стилей.
css(«display», «block») (или соответствующее отображаемое значение), чтобы переопределить таблицу стилей.Лично я считаю, что предлагать вызов hide() в обработчике ready() — плохое предложение. Это может привести к появлению нестилизованного контента, и я не думаю, что я один считаю, что FOUC выглядит непрофессионально.
Используйте [add|remove]Class()
Использование рекомендованного jQuery способа отображения и скрытия элементов.
При использовании этого метода не имеет значения, имеет ли div разное отображаемое значение для разных медиа-запросов, что дает вам возможность переключать отображение элемента, а также дает вам возможность обрабатывать особые ситуации (например, медиа-запросы). JSFiddle доступен по адресу https://jsfiddle.net/m0ofoo4y/.
[Script]-как применить функцию jquery show() и hide() к свойству отображения css специальный класс div в теге iframe?
Функция щелчка не работает в рельсах (со многими, возможно, не связанными ошибками)оценка: 4
Принятый ответ
Ваш код можно значительно сократить, используя slideToggle и некоторую простую логику для проверки наличия подменю рядом с a .
Пожалуйста, проверьте эту скрипту: https://jsfiddle.net/vxaoryg3/2/
score:1
Ваш код можно значительно сократить, используя slideToggle и некоторую простую логику для проверки наличия a подменю рядом с ним.
Пожалуйста, проверьте эту скрипту: https://jsfiddle.net/vxaoryg3/2/
score:2
Ваш код можно значительно сократить, используя slideToggle и некоторую простую логику для проверки наличия подменю рядом с a .
Пожалуйста, проверьте эту скрипту: https://jsfiddle.net/vxaoryg3/2/
Связанный запрос
- Как в jQuery написать динамическую функцию для отображения и скрытия нескольких div с разными идентификаторами?
- jQuery скрыть другие и показать активный класс с #id после URL-адреса, чтобы применить функцию history.back для последнего просмотренного идентификатора
- как использовать jQuery для отображения и скрытия HTML с помощью html-кнопок
- Как с помощью jquery отображать элемент при наведении и скрывать при нажатии
- Зацикливание функции отображения и скрытия в jquery Функция jQuery, чтобы скрыть кнопку?
- Функция скрытия и отображения Jquery работает неправильно
- Как скрыть и показать элементы в jQuery на основе существования других элементов?
- Как я могу использовать jQuery для отображения и скрытия DIV на основе флажков в отправленной форме с другой страницы?
- Как скрыть и показать div при прокрутке с помощью jQuery или JS
- как скрыть и показать с помощью кнопки нажатия атрибута data-id в jquery
- Как показать контейнер с помощью jQuery и CSS
- jquery скрыть и отобразить css нет нет нет работает
- Как сделать условное отображение и скрыть модальным для моей функции при нажатии
- Как отобразить наложенный текст при наведении на div и скрыть текущий текст на div в html и css
- Как скрыть и показать боковую панель с помощью jquery и css?
- как показать и скрыть текстовую область на основе выбранного параметра из выпадающего списка с помощью jquery
- как показать и скрыть эту панель загрузки с помощью jquery
- как применить функцию jQuery для встроенного CSS
- как я могу динамически изменить свойство css с использованием javascript и jquery
- синтаксическая проблема с функцией jquery css и преобразованием css 3
- имя функции передачи javascript в качестве параметра не работает с jquery show hide
- Как скрыть гиперссылку при загрузке формы и показать ее при некотором условии в jQuery ?
- как назначить функцию jquery таблице стилей css
- Как скрыть и показать
при загрузке формы в jquery? - Как отобразить таблицу элементов после того, как я выберу значение из первого раскрывающегося списка с помощью MVC 4 jQuery и AJAX
- отображение и скрытие не происходит должным образом в html через jquery
- Как добавить функцию остановки и запуска для этого выделения jquery
- Как скрыть и показать панель инструментов верхнего и нижнего колонтитула на Pageshow
- Проблема IOS с jQuery scrollTop для скрытия и отображения меню
- добавление эффектов для отображения и скрытия внутри функции щелчка
- показать и скрыть окно с помощью jquery
- Как показать файлы в iframe с помощью Jquery или JavaScript и предотвратить их отображение при загрузке другой страницы?
- Свернуть jquery: как изменить стиль и изменить время открытия/закрытия функции
- как показать сообщение об ошибке, когда в jQuery Sortable есть только один элемент и отключить перетаскивание один выбран
- Как взять значение из одной функции jQuery и присвоить его параметру другой функции?
- jquery — как изменить атрибут display css кнопки внутри li при наведении
- Как использовать функцию скрытия jQuery в моем приложении Rails?
- , как повернуть стрелку значка в jquery показать переключатель скрытия?
- jQuery для каждого nav hover показать и скрыть
- Как дождаться загрузки элемента перед применением функции с JQuery
- JQuery показать и скрыть элементы
- Как показать и скрыть HTML-форму на основе радиокнопки
- Как скрыть/показать вторичную навигацию с помощью jquery
- jquery prev, чтобы скрыть один div и отобразить другой после нажатия ссылки
- jquery показать и скрыть проблему div
- Как открыть и закрыть слайд jQuery с помощью класса CSS
- jQuery скрыть и показать текст уже отдельно от карусели
- Jquery onclick показать li, скрыть ВСЕ дочерние элементы li и дочерний элемент
Подробнее Запрос из того же тега
- Кнопки с всплывающей подсказкой Bootstrap внутри ячеек DataTable [Не работает]
- Я хочу сделать условие, при котором, если я выберу этот элемент из 1-го раскрывающегося списка, он покажет мне только выбранные элементы во 2-м раскрывающемся списке
- Масштаб изображения из текущего размер, а не исходный размер
- множественное назначение jquery html() не работает
- jq_form_remote_tag break
- чтение Json как объекта MVC
- Как добавить класс к элементу, когда оба входа имеют значение
- Код JS для нажатия нескольких значков на веб-странице, которая открывает новую вкладку
- Формат даты средства выбора даты пользовательского интерфейса jQuery на ajax не работает
- Почему текстовое поле теряет атрибут disabled при обратной передаче, но не атрибут value?
- Как добавить один элемент в другой сортируемый список
- Прозрачные PNG-файлы IE6 растягиваются при использовании подключаемого модуля supersleight jquery
- JQuery JSONP случайно сгенерированная функция обратного вызова
- Загрузка страницы AJAX и перезагрузка/добавление после успеха
- использование тега from
- Лучший способ переключения между несколькими галереями/слайдерами?
- получить все значения из выбранной строки таблицы
- Как я могу отправить запрос AJAX для контента, который загружается через бесконечную прокрутку?
- Перенаправление не работает должным образом при входе в систему
- Позиционирование слишком большого диалогового окна jQuery.
