Bootstrap выпадающее меню (раскрывающийся) виджет
Bootstrap выпадающего меню В этой главе описывается в раскрывающемся меню, но не имеет отношения к части взаимодействия, в этой главе будет подробно объяснить взаимодействие в раскрывающемся меню. Используйте выпадающее меню (Dropdown) плагин, вы можете добавить выпадающее меню к любому из компонентов (например, панели навигации, вкладок, капсул, меню навигации, кнопки и т.д.).
Если вы хотите обратиться к отдельным подключаемых функций, вам нужно ссылаться наdropdown.js.Или, как Bootstrap плагин Обзор упоминается в главе, вы можете обратиться кbootstrap.jsили сжатой версииbootstrap.min.js.
использование
Вы можете переключать меню скрыть выпадающий (Dropdown) плагин:
- Спомощью атрибутов данных: ссылку или кнопку для добавления данных-тумблер = "раскрывающимся"в раскрывающемся меню для переключения, следующим образом :
<Div класс = "раскрывающимся">
<a data-toggle="dropdown" href="#"> раскрывающемся меню (Дропдаун) триггер </a>
<Ul класс = "выпадающий меню" Роль = "меню" ария-labelledby = "dLabel">
...
</ UL>
</ Div>
Если вам нужно сохранить ссылку нетронутыми (полезно , когда браузер не включен JavaScript), пожалуйста , используйтеданных целевой атрибут вместо HREF = "#":
<Div класс = "раскрывающимся">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Выпадающее меню (Dropdown) <пролет класс = "каретка"> </ SPAN>
</a>
<Ul класс = "выпадающий меню" Роль = "меню" ария-labelledby = "dLabel">
...
</ UL>
</ Div>
- По JavaScript: JavaScript, вызвав выпадающее меню для переключения, пожалуйста , используйте следующий метод:
$ ( '. Дропдаун-тумблер'). Дропдаун ()
примеров
В панели навигации
Следующий пример демонстрирует использование в раскрывающемся меню панели навигации:
примеров
<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> учебник </ а>
</ Div>
<Div>
<Ul класс = "нав Navbar-нав" >
<Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li>
<Li> <а HREF = "#"> SVN < / а> </ li>
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> JMeter < / а> </ li>
<Li> <а HREF = "#"> EJB < / а> </ li>
<Li> <а HREF = "#"> Джаспер Отчет </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> другой изолированный ссылка </ A> </ li>
</ UL>
</ Li>
</ UL>
</ Div>
</ Div>
</ Nav>
Результаты следующие:
На вкладке внутри
Следующий пример демонстрирует использование вкладки в раскрывающемся меню:
примеров
<P> Тег со страницей ниспадающем меню </ p>
<Ul класс = "нав нав-табс" >
<Li класс = "активный">
<А HREF = "#"> Главная < / а> </ li>
<Li>
<А HREF = "#"> SVN < / а> </ li>
<Li>
<А HREF = "#"> Иос < / а> </ li>
<Li>
<А HREF = "#"> VB.Net < / а> </ li>
<Li класс = "раскрывающимся">
<А класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся" HREF = "#"> Java < пролет класс = "каретка"> </ SPAN> </ а>
<Ul класс = "выпадающий меню">
<Li>
<А HREF = "#"> Качели < / а> </ li>
<Li>
<А HREF = "#"> Jmeter < / а> </ li>
<Li>
<А HREF = "#"> EJB < / а> </ li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> изолированных ссылка </ A> </ li>
</ UL>
</ Li>
<Li>
<А HREF = "#"> PHP < / а> </ li>
</ UL>
Результаты следующие:
опции
Там нет никаких вариантов.
способ
Выпадающее меню для переключения есть простой способ, чтобы отобразить или скрыть в раскрывающемся меню.
$ (). Дропдаун ( 'тумблер')
примеров
Следующий пример демонстрирует выпадающее меню (Dropdown) плагин метод:
примеров
<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация">
<Div класс = "контейнер-жидкость">
<Div класс = "Navbar-заголовок">
<А класс = "Navbar-бренд" HREF = "#"> W3Cschool < / а>
</ Div>
<Div ID = "myexample">
<Ul класс = "нав Navbar-нав" >
<Li класс = "активный">
<А HREF = "#"> Иос < / а>
</ Li>
<Li>
<А HREF = "#"> SVN < / а>
</ Li>
<Li класс = "раскрывающимся">
<А HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B>
</ A>
<Ul класс = "выпадающий меню">
<Li>
<А ID = "действие-1" HREF = "#"> JMeter < / а>
</ Li>
<Li>
<А HREF = "#"> EJB < / а>
</ Li>
<Li>
<А HREF = "#"> Джаспер Отчет </ а>
</ Li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> изолированных ссылка </ а>
</ Li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> другой изолированный ссылка </ а>
</ Li>
</ UL>
</ Li>
</ UL>
</ Div>
</ Div>
</ Nav>
</ Div>
<Script> $ (функция () {$ ( "выпадающий-тумблер" . ) Дропдаун ( 'тумблер') ;.}); </ Script>
Результаты следующие:
