Develop Reference

Add active class to menu li on scrolling through section in div

In the below set of code basd on selecting the .help-menu elements on left .help-descr div navigated to particular section .
Similarly on scrolling the .help-descr div I want to add active class selection to appropriate .help-menu elements
This what I have tried:
Its something similar to the attached link Add Menu Active Class when scrolling to div I am not able to replicate same approach here
help.js
// on load of page
$(function() {
$('.backend-feature li :first').addClass('active');
$('.backend-head').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $('.backend-feature li :first').text() + '</span');
});
//on click of backend feature menu
$(".backend-feature-li").on('click', function() {
$('.frontend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.frontend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.backend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
// on click of frontend feature menu
$(".frontend-feature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
//on click of frontend other features menu
$(".front-otherfeature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.frontend-feature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$('.frontother-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span>Other Features</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/style.css">
<link src="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" src_type="url" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./vendors/css/ionicons.min.css">
<script defer src="./js/help_page.js"></script>
<title>Revive</title>
</head>
<body>
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>
</body>
</html>

If you put an IntersectionObserver on each of the main sections the system will tell you when it comes into view or goes out of view.
Then you can add or remove the active class from the related link in the menu.
This snippet gives a demo but it had to shorten the overall length of the menu area just so we got to see the content below and it also fixed it otherwise it scrolled up and the effect of adding the active class couldn't be seen as the menu item was off the screen.
To make it obvious which section(s) are in view a lime background has been put on the link.
Note, there is some thought needed on what 'active' actually means since more than one section can be in the viewport at once. This snippet does not attempt to tackle that - it's ouside the scope of this question.
The snippet needs to be viewed full page.
const callback = (entries, observer) => {
entries.forEach(entry => {
const id = entry.target.id;
const el = document.body.querySelector('[href="#' + id + '"]');
if (entry.isIntersecting) {
el.classList.add('active');
} else {
el.classList.remove('active');
}
});
};
const sections = document.querySelectorAll('.main-section');
const options = {
threshold: 0.33
};
const observer = new IntersectionObserver(callback, options);
sections.forEach(section => {
observer.observe(section);
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
height: 30vh;
/* changed for demo so we can see stuff */
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
background-color: lime;
/* ADDED JUST FOR DEMO */
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<div style="position: fixed; z-index: 1;">
<!-- added just for demo -->
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--ADDED -->
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>

fix the code to prevent dropdown menu from closing when on click

I got the code from w3scgool and modified it. The dropdown menu opens but when I click inside of it - submenu, then it closes. Here is the pure JavaScript code.
var dropdown = document.getElementsByClassName('dropdown-btn');
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener('click', function() {
this.classList.toggle('active');
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none';
} else {
dropdownContent.style.display = 'block';
}
});
}
nav.side-nav {
order: 0;
display: flex;
flex: 1 1;
flex-direction: column;
align-self: stretch;
margin-bottom: 0.67rem;
}
nav.side-nav ul {
margin: 0;
}
nav.side-nav li {
border-bottom: 1px solid #d9dadc;
border-left: 1px solid #d9dadc;
border-right: 1px solid #d9dadc;
list-style: none;
padding: 5px 15px;
font-size: 17px;
line-height: 24px;
}
nav.side-nav li:first-child {
background: #092a31;
color: white;
border: none;
font-size: 20px;
padding: 15px;
line-height: 1.1;
}
nav.side-nav li:not(:first-child):hover {
background: #cda600;
color: white;
cursor: pointer;
}
/*dropdown menu*/
.dropdown-container {
display: none;
background-color: #ffffff;
padding-left: 8px;
}
<html>
<nav class="side-nav">
<ul>
<li style="text-align:left;">some1</li>
<li href="#">some1</li>
<li href="#">some1</li>
<li href="#">some1</li>
<li id="navDrop" class="dropdown-btn">
Menu</li>
<div class="dropdown-container">
<form>
<a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br>
<a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br>
<a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br>
<a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>
</form>
</div>
<li href="#">Menu</li>
</ul>
</nav>
</html>
I am new to JS. Could someone navigate/show how to edit the code to prevent dropdown from closing when click on its submenu.
Update: took out the onclick feature. Took from my code too.
Any suggestions about the code because it stays the same. In this case I am using just JS without jquery library.

After making the modifications suggested by #Heretic Monkey and #Ganesh chaitanya, you can simplify your code by using map() instead of a for loop, and again classList.toggle() instead of else if.
just modify your css a little with a new class that you add to your div. Like that
var dropdown = document.getElementsByClassName("dropdown-btn");
// here dropdown.map() don't work, use
Array.prototype.map.call(dropdown, function(drop) {
drop.addEventListener("click", function() {
drop.classList.toggle("active");
var dropdownContent = drop.nextElementSibling;
//use classList.toggle with the new class added at the div
dropdownContent.classList.toggle("disp-container");
});
});
nav.side-nav li:not(:first-child):hover {
background: #cda600;
color: white;
cursor: pointer;
}
/*dropdown menu*/
/*remove display here*/
.dropdown-container {
background-color: #ffffff;
padding-left: 8px;
}
/*create a new class and add display here*/
.disp-container {
display: none;
}
<nav class="side-nav">
<ul>
<li style="text-align:left;">some1</li>
<li href="#">some1</li>
<li href="#">some1</li>
<li href="#">some1</li>
<li id="navDrop" class="dropdown-btn">
Menu
</li>
<!-- add your new class here -->
<div class="disp-container dropdown-container">
<form>
<a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br />
<a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br />
<a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br />
<a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>
</form>
</div>
<li id="navDrop2" class="dropdown-btn">
Menu
</li>
<!-- add your new class here -->
<div class="disp-container dropdown-container">
<form>
<a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br />
<a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br />
<a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br />
<a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>
</form>
</div>
</ul>
</nav>

How to toggle hidden by default without any animation

I using a bootstrap tree menu
the code will be hidden all sub_menu default
but, onload page will be run a animation to close.
How to without it?
JS here
$('.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(200);
});
$(function(){
$('.tree-toggle').parent().children('ul.tree').toggle(200);
})
All code in Codepen

Just remove the duration from the one that runs on page load:
$('.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(200);
});
$(function(){
$('.tree-toggle').parent().children('ul.tree').toggle();
})
As mentioned in the documentation for Toggle:
With no parameters, the .toggle() method simply toggles the visibility of elements:

You can set the delay parameter to 0(or ignore) to avoid the animation.
$(function() {
$(".tree-toggle")
.parent()
.children("ul.tree")
.toggle(0);
});
$(".tree-toggle").click(function() {
$(this)
.parent()
.children("ul.tree")
.toggle(300);
});
$(function() {
$(".tree-toggle")
.parent()
.children("ul.tree")
.toggle(0);
});
.no-padding {
padding: 0px;
}
.glyphicon-icon-rpad .glyphicon,
.glyphicon-icon-rpad .glyphicon.m8,
.fa-icon-rpad .fa,
.fa-icon-rpad .fa.m8 {
padding-right: 8px;
}
.glyphicon-icon-lpad .glyphicon,
.glyphicon-icon-lpad .glyphicon.m8,
.fa-icon-lpad .fa,
.fa-icon-lpad .fa.m8 {
padding-left: 8px;
}
.glyphicon-icon-rpad .glyphicon.m5,
.fa-icon-rpad .fa.m5 {
padding-right: 5px;
}
.glyphicon-icon-lpad .glyphicon.m5,
.fa-icon-lpad .fa.m5 {
padding-left: 5px;
}
.glyphicon-icon-rpad .glyphicon.m12,
.fa-icon-rpad .fa.m12 {
padding-right: 12px;
}
.glyphicon-icon-lpad .glyphicon.m12,
.fa-icon-lpad .fa.m12 {
padding-left: 12px;
}
.glyphicon-icon-rpad .glyphicon.m15,
.fa-icon-rpad .fa.m15 {
padding-right: 15px;
}
.glyphicon-icon-lpad .glyphicon.m15,
.fa-icon-lpad .fa.m15 {
padding-left: 15px;
}
ul.nav-menu-list-style .nav-header .menu-collapsible-icon {
position: absolute;
right: 3px;
top: 16px;
font-size: 9px;
}
ul.nav-menu-list-style {
margin: 0;
}
ul.nav-menu-list-style .nav-header {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #e8e8e8;
display: block;
margin: 0;
line-height: 42px;
padding: 0 8px;
font-weight: 600;
}
ul.nav-menu-list-style>li {
position: relative;
}
ul.nav-menu-list-style>li a {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #e8e8e8;
padding: 0 10px;
line-height: 32px;
}
ul.nav-menu-list-style>li:first-child a {}
ul.nav-menu-list-style {
list-style: none;
padding: 0px;
margin: 0px;
}
ul.nav-menu-list-style li .badge,
ul.nav-menu-list-style li .pull-right,
ul.nav-menu-list-style li span.badge,
ul.nav-menu-list-style li label.badge {
float: right;
margin-top: 7px;
}
ul.bullets {
list-style: inside disc
}
ul.numerics {
list-style: inside decimal
}
.ul.kas-icon-aero {}
ul.kas-icon-aero li a:before {
font-family: 'Glyphicons Halflings';
font-size: 9px;
content: "\e258";
padding-right: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h1>Bootstrap Tree Menu Example</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="well no-padding">
<div>
<ul class="nav nav-list nav-menu-list-style">
<li><label class="tree-toggle nav-header glyphicon-icon-rpad"><span class="glyphicon glyphicon-folder-close m5"></span>Bootstrap
<span class="menu-collapsible-icon glyphicon glyphicon-chevron-down"></span></label>
<ul class="nav nav-list tree bullets">
<li>JavaScript</li>
<li>CSS <span class="badge">42</span></li>
<li><label class="tree-toggle nav-header">Buttons</label>
<ul class="nav nav-list tree">
<li>Colors</li>
<li>Sizes</li>
<li><label class="tree-toggle nav-header">Forms</label>
<ul class="nav nav-list tree">
<li>Horizontal</li>
<li>Vertical</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggle nav-header">Responsive</label>
<ul class="nav nav-list tree">
<li>Overview</li>
<li>CSS</li>
<li><label class="tree-toggle nav-header">Media Queries</label>
<ul class="nav nav-list tree">
<li>Text</li>
<li>Images</li>
<li><label class="tree-toggle nav-header">Mobile Devices</label>
<ul class="nav nav-list tree">
<li>iPhone</li>
<li>Samsung</li>
</ul>
</li>
</ul>
</li>
<li><label class="tree-toggle nav-header">Coding</label>
<ul class="nav nav-list tree">
<li>JavaScript</li>
<li>jQuery</li>
<li><label class="tree-toggle nav-header">HTML DOM</label>
<ul class="nav nav-list tree">
<li>DOM Elements</li>
<li>Recursive</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

How to reverse action on sibling element by jquery

I want to create a menu bar with sub menu using Jquery. There are two item with sub menu. When i click on once i want it slide down and when i click second one then second one need to slide down but first one or all another one need to slide up. I tried following:
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
ENG <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>En</li>
<li>Bn</li>
</ul>
</li>
<li class="lang">
USD <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>USD</li>
<li>VND</li>
</ul>
</li>
</ul>
</div>
CSS
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
Javascript
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});

On click make other submenu to slideUp fast or slow and than toggle see below snippet for more info
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(".lang > ul").slideUp("fast");
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
ENG <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>En</li>
<li>Bn</li>
</ul>
</li>
<li class="lang">
USD <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>USD</li>
<li>VND</li>
</ul>
</li>
</ul>
</div>

one method is to add a class signifying open when clicking it and then close that class before opening another item. something like this would use that:
$(document).ready(function() {
$('.footer-lang .lang a').on('click', function(e) {
e.preventDefault();
// close the open
$('.is-open').removeClass('is-open').slideToggle('slow);
// open the closed
$(this).next('ul').slideToggle('slow');
$(this).addClass('is-open');
});
});

jQuery submenu not displaying correctly

Here is my code here first menu working properly but when applied sub sub menu it's conflicting with previous li. You can check there is a list under food report . when clicking that child is not displaying.
$(document).ready(function() {
$(".menu_li").click(function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
} else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function() {
if ($(".menu_li1").hasClass('selected')) {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').show();
$(".menu_li1").children('.child_ul1').children('.minus1').hide();
} else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(".menu_li1").addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(".menu_li1").children('.child_ul1').show('slow');
$(".menu_li1").children('.child_ul1').children('.plus1').hide();
$(".menu_li1").children('.child_ul1').children('.minus1').show();
}
});
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

Thanks Tushar your comment helped me. I solved my problem I placed event.stopPropagation(); for my sub sub menu section then it worked properly. So I placed my own answer with snippet if it helped others.
$(".menu_li").click(function(event){
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul').hide('slow');
$(this).children().children('.plus').show();
$(this).children().children('.minus').hide();
}else {
$(".menu_li").removeClass('selected');
$('.child_ul').hide('slow');
$(this).addClass('selected');
$('.plus').show();
$('.minus').hide();
$(this).children('.child_ul').show('slow');
$(this).children().children('.plus').hide();
$(this).children().children('.minus').show();
}
});
$(".menu_li1").click(function(event){
//event.preventDefault();
event.stopPropagation();
console.log('brick me!');
//$('.child_ul').hide('slow');
//$(this).children('.child_ul').toggle('slow');
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
$('.child_ul1').hide('slow');
$(this).children('.child_ul1').children('.plus1').show();
$(this).children('.child_ul1').children('.minus1').hide();
}else {
$(".menu_li1").removeClass('selected');
$('.child_ul1').hide('slow');
$(this).addClass('selected');
$('.plus1').show();
$('.minus1').hide();
$(this).children('.child_ul1').show('slow');
$(this).children('.child_ul1').children('.plus1').hide();
$(this).children('.child_ul1').children('.minus1').show();
}
});
.child_ul,
.child_ul1 {
display: none;
}
.left_menu ul li {
cursor: pointer;
}
.child_ul li,
.child_ul1 li {
border-left: 10px solid #222;
}
.child_ul,
.child_ul1 {
border-top: 1px solid #222;
}
.child_ul li a,
.child_ul1 li a {
background: #272525 none repeat scroll 0% 0% !important;
border-bottom: 1px solid #222;
}
.plus {
float: right;
margin-right: 5px;
}
.minus {
float: right;
margin-right: 5px;
}
ul li a {
background: #373737;
height: 30px;
padding-top: 14px;
display: block;
color: #949494;
text-decoration: none;
padding-left: 30px;
border-top: 1px solid #2f2f2f;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<li class='menu_li'>
<a>input form
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'></span>
</a>
<ul class='child_ul'>
<li>
কাজের বিনিময়ে খাদ্য
</li>
<li>
সেতু কালভারট
</li>
<li>
ঘূর্ণিঝড় আস্রয় কেন্দ্র
</li>
</ul>
</li>
<li class='menu_li'>
<a>Report
<span class='plus'><img src='plus.png'></span>
<span class='minus' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul'>
<li class='menu_li1'>
<a>food report
<span class='plus1'><img src='plus.png'></span>
<span class='minus1' style='display:none'><img src='minus.png'></span>
</a>
<ul class='child_ul1'>
<li>
কাজের বিনিময়ে খাদ্য সাধারণ
</li>
<li>
কাজের বিনিময়ে খাদ্য সমন্নিত
</li>
</ul>
</li>
<li>
রিপোর্ট আর্কাইভ
</li>
</ul>
</li>

If event.stopPropogation() doesn't work alone across different browsers try using event.preventDefault() along with event.stopPropogation().