Во-первых, мне известно об этих сообщениях:
Активация раскрывающегося меню начальной загрузки при наведении курсора
Выпадающий список Bootstrap с наведением
Как сделать раскрывающееся меню начальной загрузки Twitter при наведении, а не при нажатии
И другие, но до сих пор не нашли правильного решения, вот что я сделал до сих пор.
Сначала я использовал атрибут is-open из раскрывающейся директивы angular-bootstrap следующим образом:
<span class="dropdown" dropdown is-open="status.isopen">
<a
href
class="dropdown-toggle"
ng-mouseenter="status.isopen = true"
ng-mouseleave="status.isopen = false"
>
hover me for a dropdown with angular-bootstrap
</a>
<ul
class="dropdown-menu"
>
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
это, казалось, работало, но появились 2 ошибки:
- первый - когда щелкают элемент раскрывающегося списка, раскрывающееся меню исчезает, щелкнув снова, оно не вернется, вам нужно выйти из мыши, а затем ввести мышь в раскрывающийся список, чтобы вернуть раскрывающееся меню.
- Вторая проблема css/html.
Обычно обычное решение css для выпадающего меню выглядит так:
<a class="css-dropdown">
hover here with css.
<div class="css-dropdown-menu">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
</div>
</a>
Обратите внимание, что раскрывающееся меню теперь находится внутри элемента раскрывающегося списка, что означает, что при перемещении мыши от раскрывающегося списка к раскрывающемуся меню он перемещается от родительского элемента к дочернему, поэтому в основном мы все еще наводим курсор выпадающее меню, так как мы находимся в его дочернем элементе, что означает, что выпадающее меню по-прежнему будет видно, с другой стороны, выпадающее меню начальной загрузки работает с событием щелчка, поэтому наличие выпадающего меню в качестве дочернего элемента раскрывающегося списка не является необходимо, но теперь, когда кто-то хочет изменить поведение на mouseenter/hover, когда мышь покидает раскрывающийся список, раскрывающееся меню исчезает, поэтому у нас больше нет доступа к элементам раскрывающегося меню, это видно в этом plunker
Чтобы исправить первую ошибку, я просто удалил директиву раскрывающегося списка, а затем заменил директиву is-open директивой ng-class следующим образом.
Измените это:
<span class="dropdown" dropdown is-open="status.isopen">
к этому:
<span class="dropdown" ng-class="{'open': status.isopen}">
Остальное остается тем же plunker, который исправил первую ошибку.
Вторая ошибка сложна, так как выпадающее меню больше не является дочерним элементом выпадающего переключателя, эффект наведения не будет длиться при переходе от переключателя к меню, поэтому я сделал это. Изменено это:
<ul class="dropdown-menu">
к этому:
<ul
class="dropdown-menu"
ng-mouseenter="status.isopen = true"
ng-mouseleave="status.isopen = false"
>
Это сделало это, но появилась другая ошибка, когда при нажатии на элемент раскрывающегося меню он остается открытым, поэтому я продолжал взламывать, делая это. изменил это:
<li ng-repeat="choice in items">
к этому:
<li ng-repeat="choice in items" ng-click="status.isopen = false">
Это дает мне необходимое поведение plunker.
Тем не менее, это не хорошее решение, поскольку здесь задействовано множество директив для простого визуального эффекта, последний предоставленный мной плункер содержит решение css без участия Bootstrap или AngularJS, хотя это требуемое поведение, а не требуемая структура html или визуальный результат, что Мне нужно, чтобы между выпадающим переключателем и выпадающим меню был пробел, а не заполнение элемента переключения, а просто пустое пространство, что делает решение css недействительным в этой ситуации.
Итак, мой вопрос: есть ли лучший способ сделать это без добавления нового плагина/библиотеки, более чистое и легко повторно используемое решение для раскрывающегося меню при наведении курсора?
