Bootstrap 3 - Disapear ниспадающее меню, когда я нажимаю на ссылку

Question

Я получил выпадающее меню, но он не работает хорошо,

Это HTML-код:

<ul class="nav navbar-nav"> 
    <li class="dropdown"> 
     <a href="#" data-toggle="dropdown" class="dropdown-toggle"><img src="img/ico_menu_off.png" /></a> 
     <div id="MainMenu" class="dropdown-menu"> 
      <div class="list-group panel"> 
      <a href="#demo3" class="dropdown-toggle list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Portals</a> 
      <div class="collapse" id="demo3"> 
       <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 1 <i class="fa fa-caret-down"></i></a> 
       <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 2 <i class="fa fa-caret-down"></i></a> 
       <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 3 <i class="fa fa-caret-down"></i></a> 
       <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 4 <i class="fa fa-caret-down"></i></a> 
      </div> 
      <a href="#demo4" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Calculators</a> 
      <div class="collapse" id="demo4"> 
       <a href="" class="list-group-item">Portal 1</a> 
       <a href="" class="list-group-item">Portal 2</a> 
       <a href="" class="list-group-item">Portal 3</a> 
      </div> 
      <a href="#demo5" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Tools</a> 
      <div class="collapse" id="demo5"> 
       <a href="" class="list-group-item">Portal 1</a> 
       <a href="" class="list-group-item">Portal 2</a> 
       <a href="" class="list-group-item">Portal 3</a> 
      </div> 
      </div> 
     </div> 
    </li> 
</ul> 

Это код CSS:

#customer-information .list-group.panel > .list-group-item { 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px 
} 
#customer-information .list-group-submenu { 
    margin-left:20px; 
} 

мне нужно, когда я нажимаю на один из вариантов, меню Don `T disapear, меню должно быть закрыто только, когда меню

выполняется щелчок на значке отображает

Большое спасибо.

Answer 1

Вы можете добавить щелчок, чтобы предотвратить у слушателя закрытия меню:

$("[data-parent='#MainMenu']").on('click', function(e){ 
    e.stopPropagation(); 
    var dest = $(this).attr('href'); 
    $(dest).collapse('toggle'); 
}); 

Таким образом, раскрывающийся не будет закрываться при нажатии кнопки первых параметров уровня. Вы используете stopPropagation даже для предметов второго уровня, если вы хотите предотвратить закрытие также в этом случае.

Обратите внимание, что вы можете изменить селектор в соответствии с вашими потребностями. Например, $("#MainMenu>div>a") даст вам те же результаты в этом случае.

Answer 2

У меня более или менее та же проблема, но я не мог закрыть раскрывающиеся подменю и функцию, установленную в предыдущем комментарии, это не работает должным образом.

HTML такой же, как тот, положенного здесь и имеют следующие функции:

//Ocultar menu cuando se haga click fuera del mismo 
    $(document).on('click', function (e) { 
    //$(document).on("click", "body", function(e) { 
     //Target => collapse('hide') 
     if($("#MainMenu").hasClass('in')) { 
      $("#MainMenu").collapse("hide"); 
     } 
     //stop the code from bubbling up 
     e.stopPropagation(); 
     e.preventDefault();  
    }); 

    $(document).on("click", function() { 
     $("#MainMenu>div>a").on('click', function(e){ 
     e.stopPropagation(); 
     var dest = $(this).attr('href'); 
     $(dest).collapse('toggle'); 
    }); 
    }); 

, как я могу сделать, когда я падаю вниз подменю скрыть подменю, которое открыто?

Thanks