<td class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-target=".dropdown-menu" >
操作
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">编辑</a></li>
<li><a href="">删除</a></li>
</ul>
</td>
如果这段代码去掉data-target就可以执行下拉,为什么?
那这个下拉菜单不加data-target就能执行,那他是怎么触发的?
dropdown
会先根据data-target
来寻找下拉菜单,如果没有data-target
这个属性,会检测href
中的规则,最后会直接查找上级DOM对象中的dropdown-menu
为菜单项。
dropdown.js
中的相关代码如下
function getParent($this) {
var selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
var $parent = selector && $(selector)
return $parent && $parent.length ? $parent : $this.parent()
}