下拉菜单的按钮和ul是如何连接的?

Question

它来自Boostrap的官方文档。我已经从<ul>元素中删除了aria-labelledby="dropdownMenu1"属性。

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

如何链接按钮，以便它知道要下拉什么？

Answer 1

来自同一个引导文档：

将下拉菜单的切换(您的按钮或链接(和下拉菜单包装在.dropdown中，或声明position: relative;的另一个元素。可以从<a>或<button>元素触发下拉列表，以更好地满足您的潜在需求。

所以我假设按钮会寻找一个带有.dropdown-menu的兄弟姐妹，并切换它。

如果您需要更深入地了解，请查看源代码的方法show()：

https://github.com/twbs/bootstrap/blob/master/js/src/dropdown.js#L150

这是实际切换的行：

https://github.com/twbs/bootstrap/blob/master/js/src/dropdown.js#L208

这是查找菜单元素的函数：

https://github.com/twbs/bootstrap/blob/master/js/src/dropdown.js#L282

_getMenuElement() {
const parent = Dropdown.getParentFromElement(this._element)
return SelectorEngine.findOne(Selector.MENU, parent)
}

该常量在此处声明：

const Selector = {
/* ... */
MENU: '.dropdown-menu',
/* ... */
}

所以，正是我所假设的。