代码之家 › 专栏 › 技术社区 › Rob Scott Andrey

Bootstrap 3下拉切换正在页面滚动中添加“dropup”类

twitter-bootstrap css jquery

Rob Scott Andrey · 技术社区 · 10 年前

想要的结果:

防止助推器添加 dropup 类添加到下拉切换元素

根据您在页面上的位置(如下拉列表中的“空间”比上面的要大),下拉列表的选项显示在实际选择的下方或上方。我查看了引导文档,只发现了这一点:

Bootstrap Dropdown

将下拉菜单的触发器和下拉菜单包装在.dropdown或声明位置的另一个元素中:relative;。然后添加菜单的HTML。

然后向上:

通过将.dropup添加到父级,下拉菜单可以更改为向上扩展(而不是向下扩展)。

然而,包装器根本没有这两个类中的任何一个。因此,我添加了 dropdown 类添加到包装器:

你可以看到页面底部的空间比顶部的空间大。

然而,当在页面上向上滚动时(使用类 下拉列表 添加到包装器),引导程序自动添加 下拉列表 类别:

我很可能会用CSS/jQ重写,但我不知道是否有什么遗漏,比如需要分配给包装器和/或下拉切换元素本身的默认boostrap类或数据属性。

3 回复 | 直到 4 年前

Ricardo Green x44x45x41x4E 6 年前

2020年更新,供未来搜索者使用。为了避免或阻止 dropdown 从自动添加 dropup 或者任何其他自动翻转类,你都可以这样做。

您可以添加 data-flip 归因于您的 dropdown-toggle 元素的值为 false .

这是针对Bootstrap4的,但尚未在其他版本上试用。

例子:

<a href='#' class='dropdown-toggle' role="button" id="dropdownMenuLink" data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' data-flip='false'>BUTTON</a>

Rob Scott Andrey 4 年前

在做了一些研究(针对Bootstrap 3)之后 select 元素正在使用 selectpicker() ,并强制这些 选择 元素总是“下拉”,需要以下内容:

$('yourSelector').selectpicker({ dropupAuto: false });

-1

davidhartman00 9 年前

对不起,我来晚了@Rob。是的,selectpicker()是 Bootstrap-Select

如果您不熟悉这一点,请查看。它有许多Bootstrap中缺少的功能。

注意:如果您看到了“selectpicker”类,您将处理Bootstrap Select

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前