Как создать динамическое выпадающее меню?

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. Это небольшая проблема. но я не могу это понять.

Answer 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, если вы хотите. Это просто для того, чтобы дать вам представление.

Сложите свою настройку сейчас, и она выглядит примерно так, как этот сниппет. Пожалуйста, просмотрите его в полноэкранном режиме, чтобы предотвратить свертывание.

Отрывок:

$("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>

Answer 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