Глава раскрывающегося меню Bootstrap объясняет раскрывающееся меню, но не включает в себя часть взаимодействия. Эта глава подробно объяснит взаимодействие раскрывающегося меню. Используя выпадающий плагин, вы можете добавить выпадающие меню в любой компонент (например, навигационные стержни, вкладки, меню навигации капсулы, кнопки и т. Д.).
Если вы хотите ссылаться на функциональность плагина отдельно, вам необходимо ссылаться на Dropdown.js. Или, как упомянуто в главе обзора плагинов Bootstrap, вы можете обратиться к Bootstrap.js или сжатым версиям Bootstrap.min.js.
1. Использование
Вы можете переключить скрытое содержание плагина выпадающего меню (выпадающее место):
1. Используйте атрибут данных: Добавьте Data-toggle = "Выпадающий в сторону" в ссылку или кнопку для переключения раскрывающегося меню, как показано ниже:
<div> <a data-toggle = "href ="#"> выпадающий запуск </a> <ul rol =" menu "aria-labelledby =" dlabel "> ... </ul> </div>
Если вам нужно сохранить связь нетронутой (полезно, когда браузер не включает JavaScript), используйте свойство, нацеленное на данные, вместо href = "#":
<div> <a id = "dlabel" rol = "button" data-toggle = "выпадение" data-target = "#" href = "/page.html"> выпадающее меню (выпадающее место) <pan> </span> </a> <ul role = "menu" aria-labelledby = "dlabel"> ... </ul> </div>
2. Через JavaScript: чтобы переключиться через JavaScript, используйте следующий метод:
$ ('.. Выпадающий в тупик'). Расположка ()
2. Простой пример выпадающего меню
В общем использовании код такой же, как и методы компонентов:
// Декларативное использование <div> <кнопка данных data-toggle = "выпадает"> раскрывающееся меню <pran> </span> </button> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Продукт </a> </li> <li> <a href = "#"> Информация </a> </li> <li> <li> <a li> <li> <li> <li> <li> <li> <li> <li> <a li> <li> <li> <li> <li> <li> <li> <li> href = "#"> о </a> </li> </ul> </div>
Ключевое ядро декларативного использования:
1. Используйте пакеты для периферийных контейнеров;
2. Привязанность Data-toggle = "Выпадающая часть" для события внутренней кнопки нажатия;
3. Используйте элементы меню.
// Если кнопка находится за пределами контейнера, она может быть связана с помощью данных. <button id = "btn" data-toggle = "drupdown" data-target = "#распадается"> В вызовах JavaScript нет свойств, и метод не прост в использовании. Ниже приведены четыре основных события. // Открытие метода меню, но все еще нуждаются в данных-*$ ('#btn'). Ropdown (); $ ('#btn'). Выпадающий ('toggle');Раскрывающее меню поддерживает 4 вида событий, соответствующих всплывающему окне, после всплывающего окна, перед закрытием и после закрытия.
// События, другие аналогичные $ ('#updown'). On ('show.bs.dropdown', function () {alert ('Freaks немедленно, когда метод шоу называется!');});3. Использование выпадающих меню на странице вкладок
<! Doctype html> <html> <head> <title> экземпляр Bootstrap Encament - страница тега с раскрывающимся меню </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js" src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <p> страница тега с раскрывающимся меню </p> <ul> <li> <a href = "#"> Home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <li> <a href = "#"> vb.net </a> </li> <li> <a data-toggle = "Выпадение" href = "#"> java <pan> </span> </a> <ul> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> jmeter </a> </li> </li> </li> </li> </li> href = "#"> ejb </a> </li> <li> <a href = "#"> подписанная ссылка </a> </li> </li> </li> <li> <a href = "#"> php </a> </li> </ul> </body> </html>
Изображение воспроизведения:
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.