Выпадающая кнопка в выпадающем меню в Bootstrap

Question

У меня есть раскрывающаяся кнопка в выпадающем меню в Bootsrtap. Когда кнопка нажата, ее выпадающие элементы не отображаются, а раскрывающийся список родителя закрывается. Как переопределить это поведение? Спасибо
Andy
Это код фрагмента. Он основан на SB Администратор 2

<li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
     <i class="fa fa-tasks fa-fw"></i><i class="fa fa-caret-down"></i> 
    </a> 
    <ul class="dropdown-menu dropdown-tasks"> 
     <li> 
      <div href="#" style="margin-right: 10px; margin-left: 10px"> 
       <p> 
        <strong>Pictures</strong> 
       </p> 
       <div> 
        <div class="btn-group"> 
         <button type="button" class="btn btn-success dropdown-toggle" data toggle="dropdown" aria-expanded="false"> 
          Save... <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu" role="menu"> 
          <li class="menu-save-to-comp"><a href="#">To Computer</a></li> 
          <li class="menu-save-to-gdrive"><a href="#">To Google Drive</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </li> 
    </ul> 
</li> 

Answer 1

See this working example bootply

Я добавил пару классов в коде и использовать этот JavaScript:

$(".nestedDrop").click(function(e){ 
    e.stopPropagation(); 
    $(this).next().toggle(); 
}); 

$('.parentDrop').on('hidden.bs.dropdown', function(e){ 
    $(this).find('.nestedDrop').next().hide(); 
}); 

Для этой части HTML-кода

<li class="dropdown parentDrop"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">(click here for problem)<i class="fa fa-tasks fa-fw"></i><i class="fa fa-caret-down"></i> 
    </a> 
    <ul class="dropdown-menu dropdown-tasks"> 
     <li> 
      <div href="#" style="margin-right: 10px; margin-left: 10px"> 
       <p> 
        <strong>Pictures</strong> 
       </p> 
       <div> 
        <div class="btn-group"> 
         <button type="button" class="nestedDrop btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
          Now click this <span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu" role="menu"> 
          <li class="menu-save-to-comp"><a href="#">To Computer</a></li> 
          <li class="menu-save-to-gdrive"><a href="#">To Google Drive</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </li> 
    </ul> 
</li> 

Answer 2

Я нуждался в нескольких ниспадающее меню уровня в загрузчике, не очень давно, и я придумал следующий фрагмент кода:

$(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(); 
    }); 
}); 

FIDDLE HERE

Надежда, что помогает.

Alex-Z.