Во-первых, я знаю об этих сообщениях:
Активация выпадающего меню начальной загрузки при наведении курсора
Bootstrap выпадающий с Hover
Как сделать так, чтобы всплывающее меню 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 ошибки:
- первый - при нажатии на элемент dropdown-toggle раскрывающееся меню исчезает, повторное нажатие не приводит к возврату, вам нужно отпустить кнопку мыши, а затем мышью ввести выпадающее меню, чтобы вернуть раскрывающееся меню.
- вторая - это проблема 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>
Обратите внимание, теперь раскрывающееся меню находится внутри элемента dropdown-toggle, что означает, что при перемещении с помощью мыши из раскрывающегося меню в раскрывающееся меню оно перемещается от родителя к потомку, поэтому в основном мы все еще находимся над dropdown-toggle, так как мы находимся в его потомке, что означает, что выпадающее меню будет по-прежнему видимым, с другой стороны, выпадающий список начальной загрузки работает с событием click, поэтому наличие раскрывающегося меню в качестве дочернего элемента выпадающего переключателя не требуется, но теперь, когда кто-то хочет изменить поведение на mouseenter/hover, как только мышь покидает выпадающий список, выпадающее меню исчезает, поэтому у нас больше нет доступа к элементам выпадающего меню, это видно в этом элементе
Чтобы исправить первую ошибку, я просто удалил выпадающую директиву, а затем заменил is-open на директиву ng-class следующим образом.
Изменить это:
<span class="dropdown" dropdown is-open="status.isopen">
на это:
<span class="dropdown" ng-class="{'open': status.isopen}">
Остальные остаются теми же плунжерами, которые исправили первую ошибку.
Вторая ошибка хитрая, так как выпадающее меню больше не является дочерним по отношению к выпадающему списку - эффект наведения не будет длиться последним при переходе от переключателя к меню, поэтому я сделал это.
Изменено это:
<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">
Это дает мне необходимое поведение поршень.
Тем не менее, это не очень хорошее решение, так как здесь много директив для простого визуального эффекта, последний предоставленный мною плункер содержит решение css без Bootstrap или AngularJS, хотя это требуемое поведение, которое не требуется html структура или визуальный результат, мне нужно, чтобы между выпадающим-переключателем и выпадающим меню был пробел, а не отступ элемента-переключателя, а просто пустое пространство, что делает решение css недопустимым в этой ситуации.
Итак, мой вопрос, есть ли лучший способ сделать это, не добавляя новый плагин/библиотеку, более чистое и легко повторно используемое решение для всплывающего меню при наведении?
