菜单栏添加了下拉菜单后,原本文字的超链接失效原因:
举个例子:
data-toggle="dropdown",对应在bootstrap.min.js中有关这个函数会对其点击时进行JS监听执行,在菜单栏时删掉这个属性,即去掉JS的监听可实现跳转。
g.prototype.toggle = function(d) {
var e = a(this);
if (!e.is(".disabled, :disabled")) {
var f = b(e),
g = f.hasClass("open");
if (c(), !g) {
"ontouchstart" in document.documentElement && !f.closest(".navbar-nav").length && a(document.createElement("div")).addClass("dropdown-backdrop").insertAfter(a(this)).on("click", c);
var h = {
relatedTarget: this
};
if (f.trigger(d = a.Event("show.bs.dropdown", h)), d.isDefaultPrevented()) return;
e.trigger("focus").attr("aria-expanded", "true"), f.toggleClass("open").trigger(a.Event("shown.bs.dropdown", h))
}
return !1
}
}
举个例子:
<div id="menuContainer">
<div id="menu">
<div class="navbar">
<ul class="nav">
<li><a href="#" style="color:#ffffff;">首页</a></li>
<li><a href="#" style="color:#ffffff;">学习</a></li>
<li><a href="#" style="color:#ffffff;">娱乐工具</a></li>
<li><a href="#" style="color:#ffffff;">游戏</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" style="color:#ffffff;" >个人主页<b class="caret"></b></a>
<!--data-toggle="dropdown"删掉这个属性-->
<ul class="dropdown-menu">
<li><a href="#">历史操作</a></li>
<li><a href="#">团队信息</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>