Bootstrap中菜单栏使用dropdown和dropdown-menu，菜单栏中文字链接失效

本文链接：https://blog.csdn.net/xujing19920814/article/details/54344121

菜单栏添加了下拉菜单后，原本文字的超链接失效原因：

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>