Question

  <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代码来阻止它。这是一个小问题。但是我无法搞清楚。

enter image description here

Answer 1

使用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

上查找完整的示例

Answer 2

我推断您是通过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中实现。这只是为了给你一个想法。

现在将您的设置放在一起看起来和行为类似于下面的代码段。请全屏查看以防止崩溃。

<强> 段：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何制作动态下拉菜单？

2 个答案: