Многоуровневое выпадающее меню Bootstrap не расширяется

Я экспериментирую с многоуровневым выпадающим меню с помощью Bootstrap, я убедился, что у меня самая последняя версия Bootstrap. Мой код довольно прост. Проблема в том, что подуровни не расширяются (не отображаются).

Я подозреваю, что что-то не так с html:

<div class="dropdown">
<a href="#" id = "Service_1" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Service 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
    <a class="trigger right-caret">Color</a>
    <ul class="dropdown-menu sub-menu">
      <li>Green</li>
      <li>Red</li>
      <li>Blue</li>
    </ul>
</li>
<li class="divider"></li>
<li>
    <a class="trigger right-caret">Names</a>
    <ul class="dropdown-menu sub-menu">
       <li>James</li>
       <li>Mike</li>
       <li>Bob</li>
    </ul>
</li>
</ul>
</div>

Вот его скрипт: https://jsfiddle.net/9vzk9x9e/3/

Пожалуйста, поделитесь своими идеями. Спасибо.


drop-down-menu css twitter-bootstrap multi-level twitter-bootstrap-3
person OneMoreQuestion    schedule 16.02.2016    source источник
comment
не могли бы вы предоставить код скрипта?   -  person johannesMatevosyan    schedule 16.02.2016
comment
Bootstrap не предоставляет многоуровневых подменю. Где ваши правила CSS для .dropdown-submenu?   -  person Khalid T.    schedule 16.02.2016
comment
@stratovarius смотрите добавленный файл скрипта   -  person OneMoreQuestion    schedule 16.02.2016
comment
@Khalid T см. выше   -  person OneMoreQuestion    schedule 16.02.2016

Ответы (3)


arrow_upward
1
arrow_downward

Включали ли вы jQuery? Кстати, вы можете написать соответствующий JS-скрипт, чтобы иметь многоуровневое подменю, как в приведенном ниже коде:

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

Вот хороший пример, чтобы посмотреть:

http://jsfiddle.net/chirayu45/yxkut/16/

person johannesMatevosyan    schedule 16.02.2016
comment
Это точный пример, на котором я учусь. Но это не работает на моей машине. @стратовариус - person OneMoreQuestion; 16.02.2016
comment
Также я использую тот же CSS, что и в этой скрипке - person OneMoreQuestion; 16.02.2016
comment
странно, не могли бы вы привести свой пример в jsfiddle? - person johannesMatevosyan; 16.02.2016
comment
Кроме того, у вас подключен jquery? поместите этот код var online = navigator.onLine; alert(online); в начало вашего скрипта и посмотрите, возвращает ли он true или false. - person johannesMatevosyan; 16.02.2016
comment
может быть, это потому, что я поместил файл сценария в script.js - person OneMoreQuestion; 16.02.2016
comment
jsfiddle не включает jquery cdn, поэтому я думаю, что это была проблема. Загрузите jquery и подключитесь к вашему локальному коду, а также повторите код css, поскольку он предоставляет стрелку, которая позволяет видеть раскрывающиеся уровни. Вот рабочий код в Plunker: plnkr.co/edit/EaPsdTG0JxEdGNBcvVb8 - person johannesMatevosyan; 16.02.2016

arrow_upward
1
arrow_downward

Вы можете сделать это только с помощью CSS. Вот как:

HTML

<ul class="dropdown-menu" role="menu" aria-labelledby="...">
  ...
  <li class="dropdown-submenu" role="presentation">
    <a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Menu item 1</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="...">
      <li><a role="menuitem" href="#">Submenu item 1</a></li>
      <li><a role="menuitem" href="#">Submenu item 2</a></li>
      ...
    </ul>
  </li>
  ...
</ul>

CSS

/* DROPDOWN SUBMENU */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0px;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 0 3px 3px;
     -moz-border-radius: 0 0 3px 3px;
          border-radius: 0 0 3px 3px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}

.dropdown-submenu:hover > a {
  background-color: #f88e1d;
  background-image: none;
  color: #fff;
}

.navbar-default .navbar-nav .dropdown-submenu > a:after {
  border-width: 0;
}

.navbar-nav .dropdown-submenu:hover > a {
  background-color: transparent;
}

.navbar-nav .dropdown-submenu ul {
  display: block;
  padding-left: 20px;
}
person Khalid T.    schedule 16.02.2016
comment
T спасибо, но мне также интересно, почему версия с javascript не работает - person OneMoreQuestion; 16.02.2016
comment
Я думаю, что ваш JSFiddle работает. Я только что проверил это. Вам просто нужно включить jQuery 1.12.0 на панели Javascript (и установить тип загрузки: onDomready) - person Khalid T.; 16.02.2016

arrow_upward
0
arrow_downward

Решено. Проблема была в моем css, я пропустил эту часть.

.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}
person OneMoreQuestion    schedule 16.02.2016