AngularStrap bs-выпадающий список с триггером" hover " не остается открытым достаточно долго

При использовании BS-dropdown с триггером "hover" меню не остается видимым достаточно долго, чтобы пользователь мог щелкнуть по пункту меню:

Http://plnkr.co/edit/Fi39BdCOqHXnPAgITD01?p=preview

Использование задержки заставляет его вести себя неожиданным образом:

Http://plnkr.co/edit/Y2Q63DDJEyP9CTPMUfYD?p=preview

В идеале выпадающее меню должно оставаться открытым до тех пор, пока мышь находится в меню, и исчезать, когда мышь покидает меню.

3 3
javascript angularjs angularjs-directive

3 ответа:

Это потому, что hover псевдоэвент mouseleave срабатывает, когда вы зависаете над кнопкой, чтобы сосредоточиться на фактическом выпадающем списке. Вместо этого вы можете попробовать предоставить контейнер как button сам. Пример 

<button type="button" 
        class="btn btn-lg btn-primary myButton" 
        bs-dropdown="dropdown" 
        data-container=".myButton">Hover to toggle dropdown</button>

Здесь я добавил data-container как myButton, который является классом, который я дал для той же кнопки.

Plnkr

Использование задержки при скрытии не имеет никакого эффекта, так как скрытие в конечном итоге произойдет после указанной задержки, когда анимация будет помещена в очередь, когда вы наведете курсор мыши на кнопку и собирается скрыть после задержки, так что вы должны ожидать, что пользователь будет достаточно быстрым, чтобы выбрать опцию выпадающего списка. Но в качестве обходного пути вы можете просто использовать контейнер, пока для этого не будет предусмотрено исправление.

1

Смотрите этот выпуск для отслеживания хода выполнения этого выпуска:

Bs-выпадающий список и триггер наведения #638

2

Я пытаюсь реализовать выпадающее меню на загрузочной навигационной панели. Прочитав связанный выпуск github в ответе Blade1336, я добавил data-container="self". Это сделало выпадающий список видимым достаточно долго, чтобы нажать на выпадающие элементы. К сожалению, после его добавления выпадающие пункты меню больше не были доступны для клика. data-container="self" и вылились в невнятное пользовательского интерфейса. Мой код выглядел так: 

<li data-match-route="/config*">  
   <a bs-dropdown="configDropdown" data-trigger="hover" data-container="self">Config</a>
</li>

В итоге я переключил теги и поместил BS-dropdown в свой тег <li> вместо этого, что дало мне желаемую функциональность (мои ссылки снова кликабельны). Теперь мой код выглядит так: 

<li data-match-route="/config*" bs-dropdown="configDropdown" data-trigger="hover" data-container="self">
   <a>Config</a>
</li>

*я сохранил тег <a> только для целей стиля

0