В этой статье представлено использование раскрывающегося списка Bootstrap для вашей ссылки. Конкретный контент заключается в следующем
1. Анализ исходного кода:
Расходы.
Javascripts/bootstrap/durpown.js: реализация ответа раскрывающейся коробки
2. Функции и принципы:
Вкладка «Снизить», функция отображения выбранных элементов не может быть реализована по умолчанию.
принцип:
1. Используйте раскрывающийся класс в качестве точки привязки, а затем позвольте списку дочерних списков абсолютно позиционировать его. Вам также необходимо добавить точку щелчка в качестве настройки Data-toggle = "выпадающего списка", чтобы сделать ассоциацию.
2. Нужна поддержка от JS Plugin
3. Анализ исходного кода:
1. Крет: Реализуйте нисходящий треугольник, используя границы для реализации
1.1. Цвет границы - это цвет шрифта по умолчанию
1.2. Реализация треугольников: граница должна иметь ширину, и тогда соседние стороны должны иметь ширину, но цвет прозрачен; Наконец, элемент должен быть элементом блока в ряду, чтобы сделать его высоту и ширину 0.
1.3. Код выглядит следующим образом
Кода кода выглядит следующим образом: <span style = "border-left: 4px solid; граница-вершина: 4px solid transparent; пограничный пакет: 4px solid transparent; высота: 0px; ширина: 0px; линейная-высокая: нормальная; дисплей: встроенный блок;"> </span>
2. Тип прослушивания события клика связан с документом, а тип прослушивания-это Data-toggle = "Выпадающий".
3. Функция плагина, написанная плагином JS и конструктором класса, используется для вызова плагина с помощью метода JS;
4. Режим Data-* вызывает плагин, который используется для внедрения событий в документ, код заключается в следующем:
$ (document) .on ('click.bs.dropdown.data-api', clearmenus) .on ('click.bs.dropdown.data-api', '.dropdown form', function (e) {e.stoppropagation ()}). Расположенный.Код напрямую вызывает метод, определяемый выпаданием. Замечательный дизайн здесь лежит в плановой структуре, вызове режима данных и вызова режима плагина JS, в то время как эти два режима вызова используют один и тот же код.
5. Если вы называете это с помощью плагина JS, вы должны назвать основные методы самостоятельно. Только событие переключения будет связано при создании экземпляра.
var houpdown = function (element) {$ (element) .on ('click.bs.dropdown', this.toggle)}6. ClearMenu: очищается только элемент данных data-toggle = "
7. Выпадающая спина-Backdrop: используется для перемещения обработки событий NO Click
8. Keydown: Когда кнопка выпадания получает фокус, нажмите клавишу, чтобы развернуть, и нажмите верхнюю клавишу, чтобы уменьшить.
9. Data-Target и HERF = "#ID": для достижения щелчка, разверните указанный раскрывающийся список. По умолчанию - расширить узлы братьев и сестер за кнопкой:
<ul> <li> <a> Индекс </a> </li> <li> <a> zhenglu </a> </li> <li> <a data-toggle = "href ="#name "> Пользовательские инструменты </a> </li> </ul> <Div Id =" name "> <ul> <li> <a> </ul> </ul> </li> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul>.
10. Реализуйте всплывающее подменю и используйте дно: 100% (позиционирование нижнего всплывающего подменю) для его реализации
11. Примеры применения
<div id = "Выпадение"> <a id = "Dropdown-btn" data-target = "#выпадающий"> № </a> <ul> <li> <a> 3343 </a> </li> <li> <a> 555 </a> </li> </ul> </div> <li> <a> 555 </a> </li> </ul> </div>
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.