I encountered a similar issue as described in the post "Bootstrap 3 - Disapear the dropdown menu when i click in a link", but I am having trouble closing the drop-down submenus using the provided solution.
My goal is to have a submenu close when another one is clicked open, rather than all submenus remaining open at the same time. The HTML structure is nearly identical to the example shared in the mentioned post:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#MainMenu" data-toggle="collapse" data-parent="#MainMenu" class="dropdown-toggle"><img src="img/ico_menu_off.png" /></a>
<div id="MainMenu" class="dropdown-menu">
<div class="list-group panel dropdown">
<a href="#link1" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Portals <i class="caret"></i></a>
<div id="link1" class="collapse background-submenu">
<a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 1 </a>
<a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 2 </a>
<a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 3 </a>
<a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Portal 4 </a>
</div>
<a href="#link2" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Calculators <i class="caret"></i></a>
<div id="link2" class="collapse background-submenu"></div>
<a href="#link3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Links to Tools <i class="caret"></i></a>
<div id="link3" class="collapse background-submenu">
<a href="#SubMenu3" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu3">Customer Credit OverView</a>
</div>
</div>
</div>
</li>
<li><a id="btn-customersearch" ng-click="customerSearchClick();" href="#customerSearch"><img src="img/u2973_off.png" /></a></li>
<li><a id="btn-customerhome" ng-click="homeClick();" href="#/"><img src="img/u2983_on.png" /></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-manager">Sheldon Cooper</li>
<li><a href="#"><img src="img/u2977.png" /></a></li>
<li><a href="#"><img src="img/u2975.png" /></a></li>
<li><a href="#"><img src="img/u2979.png" /></a></li>
<li><a href="#"><img src="img/ico_closesession.png" /></a></li>
</ul>
</div>
Despite trying different functions like the following:
//Hide the menu when you click everywhere on the page - 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();
});
//dropdown menu
$(document).on("click", function() {
$("#MainMenu>div>a").on('click', function(e){
e.stopPropagation();
var dest = $(this).attr('href');
$(dest).collapse('toggle');
});
});
I am still unable to achieve the desired behavior of hiding an open submenu when another one is opened. Any insights on how to properly implement this functionality would be greatly appreciated.
Thank you
https://i.sstatic.net/deulX.png https://i.sstatic.net/VV7c5.png https://i.sstatic.net/TACqp.png