Recently, I developed a side menu using HTML, CSS, Bootstrap, and JavaScript. The menu appears to be functioning correctly: clicking on "Student Management" reveals the corresponding submenu, while clicking on "Invoicing Management" hides the former and displays the latter. However, there is an issue where both menus appear to be closed initially. Upon rapid successive clicks on "Student Management," followed by a single click on "Invoicing Management," and then another click back on "Student Management," both menus are displayed simultaneously. Can someone shed light on why this is happening? How can this bug be rectified with illustrative code snippets provided below? The expected behavior is for only one menu to be shown at a time.
$(document).ready(function () {
$('.collapsed').on('click dblclick', function (ev) {
if ($('.active').length > 0 &&
!$(this).hasClass("active")) {
$('.active').trigger("click");
$('.active').removeClass("active");
}
$(this).addClass("active");
});
$('.sub-menu li').on('click dblclick', function (ev) {
ev.stopPropagation();
})
});.sideMenu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
width: 300px;
height: 100vh;
color: #e1ffff;
}
.sideMenu ul, #navbar ul,
.sideMenu li, #navbar li {
list-style: none;
padding: 0px;
margin: 0px;
cursor: pointer;
color: #e1ffff;
}
.sideMenu ul,
.sideMenu li {
line-height: 35px;
}
.sideMenuRightArrow {
display: inline-block;
padding-right: 10px;
padding-top: 10px
}
.sideMenu ul .active,
.sideMenu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.sideMenu ul .sub-menu li.active,
.sideMenu li .sub-menu li.active {
color: #d19b3d;
}
.sideMenu ul .sub-menu li,
sideMenu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.sideMenu ul .sub-menu li:hover,
.sideMenu li .sub-menu li:hover {
background-color: #020203;
}
/* .sideMenu ul .sub-menu li:before,
.sideMenu li .sub-menu li:before {
font-family: Fontawesome;
content: "\f105";
display: inline-block;
padding-left: 20px;
padding-right: 10px;
vertical-align: middle;
}*/
sideMenu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.sideMenu li a {
text-decoration: none;
color: #e1ffff;
}
.sideMenu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.sideMenu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 768px) {
NavBar {
visibility: visible;
}
.sideMenu {
visibility: hidden;
}
}
@media (min-width: 769px) {
navbar {
visibility: hidden;
}
.sideMenu {
visibility: visible;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>SMS_Online</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<main role="main" class="container-fluid" style="padding:0px;">
<div class="col-xs-03">
<div class="sideMenu">
<div class="menuItems">
<ul class="">
<li class="">
<a href="#">
<i class="fa fa-dashboard fa-lg"></i>Main Dashboard<span class="arrow"></span>
</a>
</li>
<li data-toggle="collapse" data-target="#studentsSubItems" class="collapsed">
<a href="/">
<i class="fas fa-user-graduate"></i>Student Management<i class="fas fa-chevron-down float-right sideMenuRightArrow"></i>
</a>
<ul class="sub-menu collapse" id="studentsSubItems">
<li>
<a href="#">
<i class="fas fa-chevron-right"></i>Student Main
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chevron-right"></i>Register Student
</a>
</li>
</ul>
</li>
<li data-toggle="collapse" data-target="#invoicingSubItems" class="collapsed">
<a href="#">
<i class="fas fa-user-graduate"></i>Invoicing Management<i class="fas fa-chevron-down float-right sideMenuRightArrow"></i>
</a>
<ul class="sub-menu collapse" id="invoicingSubItems">
<li>
<a href="#">
<i class="fas fa-chevron-right"></i>Invoicing Main
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chevron-right"></i>Create an invoice
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</main>
</body>
</html>