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

来源：互联网发布：黑龙江广联达软件购买编辑：程序博客网时间：2024/05/16 19:37

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

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>

0 0