MEAN栈应用中navbar-nav类下href引发语法错误问题咨询

这个问题我之前在做Bootstrap + Angular项目时也碰到过，根源出在Bootstrap下拉菜单组件对.navbar-nav容器内链接的特殊处理逻辑上。

为什么会报错？ #

当导航栏使用.navbar-nav类时，Bootstrap的导航相关JS逻辑会自动作用于容器内的链接元素。其中下拉菜单插件会默认把带有data-toggle="dropdown"的元素的href属性值当作jQuery选择器来解析，尝试定位下拉菜单的目标；同时，.navbar-nav内的普通链接也可能被相关逻辑误处理——比如你写的href="/"，会被插件当成jQuery选择器去解析，而/显然不是合法的选择器格式，所以就抛出了Syntax error, unrecognized expression: /的错误。

而当你去掉.navbar-nav类后，Bootstrap的导航JS逻辑不会作用于这些链接，自然也就不会去解析它们的href值，错误也就消失了。

解决办法 #

给你几个可行的方案：

1. 用Angular的ng-href替换原生href
   对于MEAN栈这类单页应用，Angular的ng-href更适配路由逻辑，还能避免Bootstrap的JS误解析：

   <li><a ng-show="!main.isLoggedIn" ng-href="/">Home</a></li>
   

2. 修改下拉触发链接的href为无效值
   把下拉触发的href="#"改成href="javascript:void(0)"，既不会触发页面跳转，也不会让Bootstrap把它当作选择器解析：

   <a ng-show="!main.isLoggedIn" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
     Register <i class="fa fa-angle-down"></i>
   </a>
   

3. 添加data-target="#"明确阻止选择器解析
   如果想保留href="#"，可以给下拉触发链接加上data-target="#"，告诉Bootstrap不要用href的值作为选择器：

   <a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#" data-hover="dropdown" data-delay="0" data-close-others="false">
     Register <i class="fa fa-angle-down"></i>
   </a>
   

修改后的完整代码示例 #

<ul class="nav navbar-nav">
  <li><a ng-show="!main.isLoggedIn" ng-href="/">Home</a></li>
  <li class="dropdown">
    <a ng-show="!main.isLoggedIn" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
      Register <i class="fa fa-angle-down"></i>
    </a>
    <ul class="dropdown-menu">
      <li><a ng-href="/issuerregister">Issuer</a></li>
      <li><a ng-href="/investorregister">Investor</a></li>
    </ul>
  </li>
  <li><a ng-show="main.isLoggedIn" href="javascript:void(0)" ng-click="main.logout();">Logout</a></li>
</ul>

这样修改后，既保留了.navbar-nav的样式，也不会再出现控制台的语法错误了。

内容的提问来源于stack exchange，提问作者angelmaria