如何制作动态下拉菜单？答案

【问题标题】：How to make dynamic dropdown menu?如何制作动态下拉菜单？
【发布时间】：2015-01-19 04:47:43
【问题描述】：

  <ul class="nav navbar-nav friend-label">
                <li class="dropdown" ng-repeat="module in modules">
                     <a href="" class="dropdown-toggle" data-toggle="dropdown">  
                      {{module.ModuleName}} <b class="caret"></b>
                     </a>

                    <ul class="dropdown-menu">
                        <li  ng-repeat="subModule in module.SubModules">
                            <a href=""><b>{{subModule.SubModuleName}} </b>
                            </a>

                        </li>
                    </ul>
                </li>
   </ul>

由此，我得到了关注。问题和问题是，当我确实有子菜单时，如果出现下拉菜单就可以了，但是当没有子菜单时，下拉菜单不应该出现。它仍然显示下拉小指针箭头。如果你点击它，它会出现空白下拉菜单。

如图所示，联系我们菜单没有子菜单。仍然是空白下拉菜单。我想使用上面的 HTML 代码来停止它。这是一个小问题。但我无法弄清楚。

【问题讨论】：

angularjs 与此有什么关系？
实际上，如果您正在使用 AngularJS，Angular UI 的 ui.bootstrap 可能是集成 Twitter Bootstrap 的更好方法。见：angular-ui.github.io/bootstrap

标签： angularjs css drop-down-menu twitter-bootstrap-3

【解决方案1】：

我推断您正在通过 ajax 或服务器端动态填充下拉项目。

如果是这样，那么您可以使用小的 CSS/Javascript 来隐藏空菜单。但是，您必须注意一些怪癖。

首先确保您的标记如下所示：

    <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact Us <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu"></ul>
    </li>

重要提示：请注意，ul.dropdown-menu 开始和结束标记之间有没有空格。这是因为，如果有空格或换行符，CSS :empty 选择器将失败。

现在，如果您的数据库中有菜单项，您可以将ul.dropdown-menu 中的菜单项填充为li。如果没有项目，则它将为空。此时，您将看到一个空的小下拉菜单，但仍显示插入符号。

一点 CSS 可以让空的下拉菜单消失：

ul.dropdown-menu:empty {
    display: none;
}

但是，因为 CSS 没有反向相邻兄弟组合，我们不能定位插入符号。所以，我们不得不求助于一点 Javascript/jQuery：

$("ul.dropdown-menu:empty").prev("a").children("span.caret").first().hide();

如果你愿意，你可以选择只在 jQuery 中实现。这只是给你一个想法。

将您的设置放在一起，现在看起来和行为类似于下面的 sn-p。请全屏查看，以免崩溃。

片段：

$("ul.dropdown-menu:empty").prev("a").children("span.caret").first().hide();

ul.dropdown-menu:empty {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
            </ul>
        </li>
        <li class="dropdown"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact Us <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu"></ul>
        </li>
    </ul>
</nav>

【讨论】：

【解决方案2】：

使用ngRepeat，您可以从模型中动态填充菜单：

<span class="dropdown" dropdown on-toggle="toggled(open)">
      <a href class="dropdown-toggle" dropdown-toggle>
        Click me!
      </a>
      <ul class="dropdown-menu">
        <li ng-repeat="choice in items">
          <a ng-click="runFn(choice.fn)">{{choice.name}}</a> 
        </li>
      </ul>
    </span>

在 Plunker 上查找完整的示例

【讨论】：