2014-12-19 4 views
1

Блок подменю всегда отображается даже до наведения. Невозможно понять, чего не хватает: -Подзаголовок Bootstrap 3 Dropdown не работает

**HTML** 

<li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#"> 
      Menu 
      </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Item1</a></li> 
      <li class="dropdown-submenu"> 
       <a href="#">Item2</a> 
       <ul class="dropdown-menu" > 
        <li> 
         <a href="#">Item2.1</a> 
        </li> 
        <li> 
         <a href="#">Item2.2</a> 
        </li> 
       </ul> 
      </li> 
      </ul> 
     </li> 

CSS

/* dropdown sub menu support for Bootsrap 3 */ 
.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu > .dropdown-menu { 
    top: 5px; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
} 

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

Когда я парить главное подменю меню блок выпадающего меню всегда видна?

.dropup .dropdown-submenu > .dropdown-menu { 
    top: auto; 
    bottom: 0; 
    margin-top: 0; 
    margin-bottom: -2px; 
} 

.dropdown-submenu > a:after { 
    position: absolute; 
    display: inline-block; 
    font-size: 14px; 
    right: 7px; 
    top: 7px; 
    font-family: FontAwesome; 
    height: auto; 
    content: "\f105"; 
    font-weight: 300; 
} 

.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; 
} 

Я использую метроническую тему и включил ее все возможные таблицы стилей.

+1

, что начальной загрузки Javascript вы включены? – atmd

+0

Я включил бутстрап javascript. bootstrap.min.js – aa003

+0

@ aa003 Вы также включили JQuery? – Refilon

ответ

1

Видимо Bootstrap 3.0 и более поздняя версия don't support nested dropdown menus.

Возможно, стоит проверить скрипт по ссылке выше.

Я добавлю его здесь для полноты:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { 
    // Avoid following the href location when clicking 
    event.preventDefault(); 
    // Avoid having the menu to close when clicking 
    event.stopPropagation(); 
    // Re-add .open to parent sub-menu item 
    $(this).parent().addClass('open'); 
    $(this).parent().find("ul").parent().find("li.dropdown").addClass('open'); 
});