首先,我知道这个帖子:
Activating bootstrap dropdown menu on hover
Bootstrap Dropdown with Hover
How to make twitter bootstrap menu dropdown on hover 而不是 click
和其他的,但仍然没有找到正确的解决方案,这就是我到目前为止所做的.
首先,我使用了 angular-bootstrap 下拉指令中的 is-open 属性,如下所示:
<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-toggle 下拉菜单消失,因此我们不再可以访问下拉菜单元素,这在此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。
也就是说,这不是一个好的解决方案,因为这里涉及很多指令以获得简单的视觉效果,我提供的最后一个 plunker 包含一个不涉及 Bootstrap 或 AngularJS 的 css 解决方案,尽管它是必需的行为,但不是必需的html 结构或视觉结果,我需要的是在下拉切换和下拉菜单之间有一个空格,而不是切换元素的填充只是一个空白,这使得 css 解决方案在这种情况下无效。
所以,我的问题是有没有更好的方法来做到这一点,而无需为悬停下拉菜单添加新的插件/库更干净且易于重用的解决方案?