如何在引导程序中为两个不同的网页制作主菜单和下拉菜单？

Question

我正在为我的网站使用 Bootstrap 3.3.4。

我有一个菜单代码 sn-p 如下：

<ul class="nav navbar-nav">
<li class="{{projects}}"><a href="/darpan/pages/project/projectList.html">Projects</a></li>
</ul>

上面的代码工作正常。当用户点击菜单“项目”时，相应的网页打开。

现在我想在上面的菜单中添加一个子菜单。这个子菜单应该打开一个链接到它的新网页。我尝试的代码如下：

<ul class="nav navbar-nav">
  <li class="{{projects}}" class="dropdown">
    <a class="dropdown-toggle projects"
        data-toggle="dropdown"
        href="/darpan/pages/project/projectList.html">
      <span id="projects">Projects</span>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="/darpan/pages/project/createNewProject.html">Add new project</a>
      </li>
    </ul>
  </li>
</ul>

现在这样做之后，我面临的问题是，当用户单击“项目”菜单时，会打开下拉菜单“添加新项目”，然后单击“添加新项目”会打开相应的网页。根据我的要求，这是完美的，但是与菜单“项目”相关的网页呢，因为单击它时它没有打开。这也应该与下拉菜单功能一起使用。

有人可以在这方面帮助我吗？谢谢。

Answer 1

在您的锚点中添加 disabled 类，并使用此 css 再添加一个 <a>

<ul class="nav navbar-nav">
  <li class="{{projects}}" class="dropdown">
    <a class="dropdown-toggle projects disabled" href="/darpan/pages/project/projectList.html">Projects</a>
    <a class="dropdown-toggle"><b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="/darpan/pages/project/createNewProject.html">Add new project</a></li>
    </ul>
  </li>
</ul>

css

.caret1 {
    position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
    padding-right: 40px;
}

在这里找到第二个解决方案：https://stackoverflow.com/a/24581001/4119808