This my html file. I dont know why in the menu dropdown-menu is always active even when not selected!
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/theme/css/style.css">
<link rel="preload" as="style" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css" type="text/css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/print.css">
<style>
.home {
padding: 5rem 0 10rem 0;
background: url('http://arisk-icelab.polito.it/engine/static/assets/images/Slide_ARISK.JPG') no-repeat;
background-size: 100% 100%;
margin-top: 3rem;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a:after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
<div id="home">
<!--- Navigation --->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="menu" aria-haspopup="true" aria-expanded="false">Business Continuity<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Mappatura del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#rischio-soci">Rischio Soci</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Trattamento del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-ambiente">Trattamento Ambiente e Sociale</a>
</li>
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-compliance">Trattamento Compliance</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="nav-item">
<a class="dropdown-item" href="#survey-risk">Risk Top 10</a>
</li>
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--- End Navigation --->
<!--- Start Landing Page Section --->
<div class="landing">
<div class="row">
</div>
</div>
<!--- End Landing Page Section--->
</div>
<div id="rischio-soci" class="offset">
<div class="home">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<div style="height: 600px" id="drawRischioSoci"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
<div class="row text-md-center text-center text-sm-center" style="padding-left: 1rem">
<div class="col-md-8">
</div>
</div>
</div>
</div>
<!-- Start Trattamento Section-->
<div id="trattamento-ambiente" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Ambiente</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoAmbiente"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<!-- Start Trattamento Section-->
<div id="trattamento-compliance" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Compliance</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoCompliance"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<script src="http://arisk-icelab.polito.it/engine/static/assets/web/assets/jquery/jquery.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/popper/popper.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/smoothscroll/smooth-scroll.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/viewportchecker/jquery.viewportchecker.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/theme/js/script.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/print.css"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<script>
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
</script>
</body>
</html>
My question is how to resolve this problem that you can see in the menu. You can replicate this page by copy paste of the code.
I posted this question 3 days ago but no answer! yet. the javascript code is from another SO answer. link
Here is the image of problem as well.
As you can see "trattamento del riscio" is active (blue) while only mapatura del rischio should be since it's submenu is open!
