Question

我正在开发一个带有Twitter Bootstrap布局框架的Meteor项目。在我的模板中，我定义了一个导航栏：

<template name="navbar">
 <div class="container">
  <div class="navbar navbar-inverse">
   <div class="navbar-inner">
    <div class="container-fluid">
     <a class="brand" href="/about">Protocol Planner</a>
     <div class="navbar-content"</div>
      <ul class="nav pull-left">
       <li><a class="" id="plan_button" href="/protocol_plannen">Plannen</a></li>
       <li><a class="" id="pat_button" href="/protocol_viewing">Uitvoeren</a></li>
      </ul>
      <ul class="nav pull-right">
       <li><a class="" id="admin_button" href="/admin"><i class="icon-wrench icon-white"></i></a></li>
       <li><a class="" id="logout_button" href="/"><i class="icon-off icon-white"></i></a></li>
       <li><a class="" id="profile_btn" href="/profile"><i class="icon-user icon-white"></i> {{currentUser.profile.name}}</a></li>
      </ul>
     </div>
    </div>
   </div>
  </div>
 </div>
</template>

发生以下问题。加载页面时，可以点击alle超链接。但是，当您单击超链接“Uitvoeren”时，该页面已加载，您无法再单击超链接“Plannen”。在这种情况下，右侧的超链接也是不可点击的，除了指向/ profile页面的链接。然后，你首先点击/ about链接，所有链接都可以再次点击。

我正在使用铁制路由器。

有没有人可以帮助解决这个问题？

亲切的问候。

Answer 1

好的，经过一些研究后我发现了问题所在。

点击链接＆＃34; Uitvoeren＆＃34;该页面正在加载。所以，页面的模板＆＃34; Uitvoeren＆＃34;被渲染。在模板中定义了三个模态模板：

<template name="Uitvoeren">
 ....
 {{> modal_1}}
 {{> modal_2}}
 {{> modal_3}}
</template>

模态模板定义如下：

<template name="modal_1">
 <div class="modal fade" id="myModal">
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal">&times;</button>
   <h3>myModal</h3>
  </div>
  <div class="modal-body">
   ...
  </div>
  <div class="modal-footer">
   <a href="#" class="btn btn-default" data-dismiss="modal" id="button">OK</button>
  </div>
 </div>
</template>

问题在于，即使是不可见的模态，它们也显示在页面顶部的导航栏上方。因此，导航栏上的链接因其上方的模式而无法访问。

为了消除这个问题，必须在模态模板的定义中更加安静地使用代码：

<template name="modal_1">
 <div class="modal fade" id="myModal" style="display: none;">
 ....
</template>

现在它看起来一切正常。

亲切的问候。

Meteor项目：超链接在twitter bootstrap navbar中始终不起作用

1 个答案: