Выпадающий компонент в навигационной панели начальной загрузки используется очень часто. В этой статье представлена выпадающее событие навыкания компонентов в Bootstrap. Конкретный контент заключается в следующем
Как реализовать это мероприятие на Hover? На самом деле, его легко завершить на основе события Click выпадающего компонента. Те, кто осторожен, могут обнаружить, что когда появится выпадающая коробка, его родитель будет иметь атрибут открытого класса. Нам нужно добавить или удалить открытый класс к родителю при прослушивании события Hover.
Плагин Boostrap-Hover-Dropdown.js, URL-адрес кода, размещенный на GitHub: View
Вот полный код плагина JS:
// Bootstrap Adpraging Navigation Bar <br>; (function ($, window, undefined) {// вне сферы действия плагина jQuery в // отслеживать все раскрывающиеся в VAR $ alldRopdowns = $ (); // Если мгновенный клосо, тогда это будет мгновенно // ОТВЕТСТВЕННЫЕ, когда новые элементы. О // Это родитель с выпаданием в сторону $ alldropdowns = $ alldropdowns.add (this.parent ()); $ (this) .data ('close-bother')}, options = $. function () {timeout = window.settieout (function () {$ this.RemoveClass ('open');}, опции.delay);Вы можете видеть, что автор добавил полуколон перед плагином, который увеличивает совместимость плагина, поскольку предыдущий код JS не может быть записан; Если здесь полуколон здесь не добавлен, это может вызвать ошибку JS, потому что нет разрыва строки.
Дополнительные параметры
Задержка: (необязательный параметр) Задержка в миллисекундах. Это время, чтобы закрыть раскрытие до того, как мышь больше не окажется в раскрывающемся меню или элементе кнопки/навигации, активируйте ее. Значение по умолчанию составляет 500.
MindlantlyClosethers: (необязательный параметр) Булевое значение, если это правда, немедленно закроет все другие раскрывающиеся меню, когда вы начнете новую навигацию по сопоставлению селектора. Значение по умолчанию верно.
После добавления вышеуказанного кода JS эффект не может быть реализован в настоящее время, потому что нам нужно сделать еще один шаг, который должен добавить атрибуты Data-* к элементу:
Данные-Hover = "Выпадающий список"
Завершите код элемента HTML:
Скопируйте код следующим образом: <a href = "javascript:;" data-toggle = "Раскрытие" hover = "Выпадающий"> </a>
Параметры могут быть установлены с помощью атрибутов данных или с помощью задержки данных и о-тряных данных.
Скопируйте код следующим образом: <a href = "#" data-toggle = "Выпадение" HOVER = "DARDWOND DATA-DELAY =" 1000 "DATA-CLOSE-Others =" false "> </a>
Конечно, есть и самый простой способ, который должен использовать CSS, чтобы контролировать
[/code] .nav> li: hover .dropdown-menu {display: block;} [/code]
Этот вид кода также может достичь желаемого эффекта наказания, но если вы нажмете на компонент при падении, а затем перейдите к другому компоненту, чтобы зависеть, появится следующий эффект: появится следующий эффект:
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Выше приведено метод использования раскрывающейся компонента начальной загрузки, который вы поделились с вами. Я надеюсь, что вам будет полезно овладеть наклонением.