它来自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> 

该按钮如何知道下拉菜单?

===============>>#1 票数:0

从相同的Bootstrap文档中:

将下拉菜单的切换按钮(您的按钮或链接)和下拉菜单.dropdown.dropdown或另一个声明position: relative;元素内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',   /* ... */ } 

所以,正是我所假设的。

  ask by lafleur translate from so

本文未有回复,本站智能推荐: