导航菜单未正确选择

Question

我创建了一个带导航栏的垂直菜单除了下拉按钮外它工作正常。

它似乎无法活跃。 活动状态保持在单击的上一个项目上。

我没有使用任何javascript

<ul class="nav nav-pills nav-stacked">
  <li id="contact" role="presentation" data-toggle="tab" class="active"><a href="#"><span class="glyphicon glyphicon-user"></span> Dossier personnel</a></li>
  <li id="appointment" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-calendar"></span> Rendez-vous</a></li>
  <li id="room" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-bed"></span> Chambre</a></li>
  <li id="task" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-road"></span>  Listes des travaux</a></li>
  <li id="setup" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-wrench"></span> Configuration</a></li>
  <li id="report" role="presentation" data-toggle="tab"><a href="#"><span class="glyphicon glyphicon-stats"></span> Rapport</a></li>

   <li role="presentation" data-toggle="tab" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                            <span class="glyphicon glyphicon-print"></span> Impression du jour<span class="caret"></span>
                        </a>
   <ul class="dropdown-menu" role="menu">
       <li role="presentation"><a href="#">Travaux</a></li>
       <li role="presentation"><a href="#">Rendez-vous</a></li>
       <li role="presentation"><a href="#">Coupon rendez-vous</a></li>
   </ul>
 </li>
</ul>

Answer 1

您忘记关闭顶级<ul>标记，以便修复它。

See this bootply

Answer 2

您是data-toggle =“tab”，而您的data-toggle =“dropdown”有两个不同的类。由于您的数据切换下拉列表是第二个，它会覆盖li类“数据切换选项卡”，直到单击下拉列表中的链接关闭您的ul菜单，使li最终处于活动状态。你可能可以使用一些棘手的js或css来改变它，但是对你的问题没有真正简单的解决方法。