Недавно компания использовала функцию меню Bootstrap для создания веб -страниц. Необходимо было навести на пари мышью, чтобы показать вторичное меню, поэтому я изучил ее и обнаружил, что, вероятно, есть два метода.
Первый метод: изменить лист стиля
На самом деле, это относительно просто. Вам нужно только добавить CSS, чтобы установить состояние падения и установить раскрывающееся меню для блокировки. Для конкретного CSS:
Кода -копия выглядит следующим образом:
.nav> li: hover .dropdown-menu {display: block;}
Это предложение CSS добавляется в CSS, который появляется после Bootstrap.min.css, попробуйте!
недостаток:
1. Соответствующее верхнее меню нельзя нажать
2. После того, как мышь скользит во вторичное меню, в верхнем меню нет стиля
Второй метод: используйте функции jQuery для реализации
В сочетании с онлайн -учебниками два события в JQUERY могут решить проблему. Для конкретного CSS:
Кода -копия выглядит следующим образом:
// Закрыть событие Click.bs.dropdown.data-API, чтобы сделать верхнее меню
$ (документ) .off ('click.bs.dropdown.data-api');
// Происхождение автоматически
$ ('. Nav .dropdown'). MouseEnter (function () {
$ (this) .addclass ('open');
});
// оригинал
$ ('. Nav .droddown'). MouseLeave (function () {
$ (this) .RemoveClass ('open');
});
Этот метод не только позволяет вам нажимать на верхнее меню, но и не терять стиль, но и решает проблему зависания Bootstrap мыши. Это рекомендуется всем.