寻找Angular.js的dropup指令

Question

我想在Angular.js中实现一个下拉菜单（在按钮上方打开的菜单），其行为类似于Boostrap中的“.dropup”类。

是否有指令执行此操作或创建一个指令？

Answer 1

如果您正在使用实际使用Bootstrap的dropdown指令（例如UI Bootstrap Dropdown directive），那么您没有理由不能应用{{1}将该类本身分类到该下拉列表并使其按预期工作。

.dropup

以下是一名演示者：http://plnkr.co/edit/pzoRuVOjHHaBLryCv7RA

Answer 2

如果您正在谈论导航栏类型的内容，而不是<select>元素，请使用以下CSS：

.nav ul li {
  position: relative;
}
.nav ul ul {
  display: none;
  postion: absolute;
  bottom: 100%;
  width: 100%;
}

添加您自己的CCS调味品并使用jQuery动画补充：

$('.nav ul li').hover(function() {
  $(this).children('ul').stop().slideDown();
}, function() {
  $(this).children('ul').stop().slideUp();
});

stop()可防止动画在令人讨厌的队列中堆叠。尽管有命名，但slideDown()会向上打开子菜单，而slideUp()会向下关闭它，因为您已经在CSS中添加了元素的底部。