css - 如何在 Bootstrap 中为两个不同的网页制作主菜单和下拉菜单？

Question

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

我有一个菜单代码片段如下:

<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

在你的 anchor 中添加disabled类并再添加一个<a>用这个 CSS

<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