Develop Reference

how to keep first menu expanded in jquery & expand/collapse icon not working

I have a dropdown where I have to keep 1st menu expanded & expand/collapse icon. The icon is visible only onclick. By default, the icon is not reflected. I have to insert the icon from my local. Expand/Collapse is working.Maybe my approach to writing code is wrong Please help to fix the icon issue. Below is my code. Thanks in advance.
$(document).ready(function () {
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("expand collapse");
});
$('.sub-menu a').click(function(){
if($(this).hasClass('toggIconUp')){
$(this).removeClass('toggIconUp').addClass('toggIconDown');
}else{
$(this).removeClass('toggIconDown').addClass('toggIconUp');
//var blockId = $(this).parent().attr('data-toggle-id');
}
});
});
body {
background-color: #fff;
font-size: 14px;
}
.nav {
position: relative;
margin: 50px;
width: 170px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li a {
display: block;
background: #ffffff;
padding: 10px 15px;
color: #414141;
text-decoration: none;
}
.sub-menu ul li a:hover {
background: #dedede;
}
.nav ul li a .icon_sty {
text-align: center;
float:right;
}
.nav ul ul {
background-color:#eeeeee;
}
.toggIconDown {
background-image: url(./images/down_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}
.toggIconUp {
background-image: url(./images/up_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class='sub-menu toggIconUp'>Panel<div class='icon_sty right'></div>
<ul class="">
<li><a href='#'>one </a></li>
<li><a href='#'>two </a></li>
<li><a href='#'>three </a></li>
<li><a href='#'>four </a></li>
<li><a href='#'>five </a></li>
</ul>
</li>
<li class='sub-menu toggIconUp'>second<div class='icon_sty right'></div>
<ul class="">
<li><a href='#'>second_one </a></li>
<li><a href='#'>second-two </a></li>
</ul>
</li>
</ul>
</div>

Drop down menu with clicks

I am creating a drop down menu that shows a submenu when clicked instead of using hover.
When I click it is displayed as it should be but I would like that when I click on another option the previous one is hidden and not kept open as right now.
In advance, thank you very much to the person who takes the trouble to help me, here is the code I'm working with.
$('.parent a').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>

Move the display logic to ".active" selector in css,
.active {
display: block;
}
then try the following script.
It would check if the click is not inside current menu, if the click is anywhere but current menu, active class will be removed.
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
Here's the full code,
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.active {
display: block;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>

using siblings(), you have quickest solution:
parents("li.parent").last() keeps the highest parent li.parent of selected item
.sibling() keeps all others li.parent brothers (of main menu)
.find("ul") keeps all ul children from all li.parent brothers
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>

You could try with
$('.parent a').on("click", function (e) {
$('.parent ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});

Submenu levels do not work properly Vanilla JS

I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}

The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}

JavaScript hover without using a mouse

I'm currently working on a website. I wanted to make it easier to people with disabilities to use. My boss is blind but he uses the program "JAWS" to navigate through things on his computer. What I'm trying to do is when he does on this website, he can press "tab" and the "hover menu" pops open.
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
color: white;
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<nav class="menu">
<ul class="nav nav-pills" class="clearfix">
<li class="active"><a>Home</a>
</li>
<li>About<span class="arrow">▼</span>
<ul class="sub-menu">
<li><a align="left" href="#">About the Center</a>
</li>
<li>Membership
</li>
<li>History
</li>
<li>Mission
</li>
<li>Event Calendar
</li>
<li> News
</li>
</ul>
</li>
</ul>
</nav>
And this is what I tried to do.
if (window.addEventListener) {
var keys = "16";
window.addEventListener("keydown", function(e) {
keys.push(e.keyCode);
if (keys.toString() >= 0) {
document.getElementById("about").hover();
};
});
};

change menu background color on selected

i need to change selected sub menu background color. but, i dont know how to change background color, when i click the submenu.
jsfiddle: http://jsfiddle.net/BJQ6y/
my Css code :
.menuContent { background-image:url("../images/new.png"); border:1px solid #C7C7C7; bottom: 0px; position: fixed; width:100%; margin: 0 auto; text-align: center; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-box-shadow: 3px -3px 5px #B8B8B8; -webkit-box-shadow: 3px -3px 5px #B8B8B8; box-shadow: 3px -3px 5px #B8B8B8; }
.menuContent a.slider { background-color:#fff; background-image: -moz-linear-gradient(center top, #ddd, #FFF); background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF)); border: 1px solid #C7C7C7; border-bottom:none; cursor: pointer; float:right; height: 8px; margin:-15px 30px 0 0; padding:3px 20px; width: 8px; z-index: 2001; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 3px -2px 3px #B8B8B8; -webkit-box-shadow: 3px -2px 3px #B8B8B8; box-shadow: 3px -2px 3px #B8B8B8; }
.menuContent a.slider img { padding-bottom: 3px; }
#nav { list-style: none; padding: 0px; margin: 0px; }
#nav li { display: inline-block; background: #222; }
#nav li a { color:#858585; font-weight: bold; display: block; padding: 15px 25px; text-align:center; text-decoration:none; width: auto; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; text-transform:uppercase; min-width: 125px; }
#nav li li a { padding: 10px 5px; text-align: left; }
#nav li li li a { padding: 7px 5px; text-align: left; }
#nav li ul { background: #333; margin: 0px; padding: 0px; }
#nav li a:hover, #nav li a.active, #nav li a.sel { background-color:#fff; color: #222; }
#nav li ul { display:none; }
#nav li ul li { background: #CCC; }
#nav li ul li ul{ background: #222; }
#nav li ul li li { background: #600; }
#nav li ul li { margin: 5px 0; display: block; }
#nav li a img { border-width: 0px; margin-right: 8px; vertical-align: middle; }
#nav ul li a img { background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; vertical-align:middle; width:16px; }
#nav li ul li { border-bottom: 1px solid #ccc; }
#nav li li ul { margin-left: 25px; }
My Html CLde
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Bharatanatyam</title>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script>
$(function(){
$('.slider').click(function () {
$('#nav').slideToggle(300);
var img = $(this).find('img');
if ($(img).attr('id') == 'bot') {
$(img).attr('src', 'images/arrow_top.png');
$(img).attr('id', 'top');
} else {
$(img).attr('src', 'images/arrow_bottom.png');
$(img).attr('id', 'bot');
}
});
$('.sub').click(function () {
var cur = $(this).prev();
$('#nav li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
});
$('.sub_menu').click(function () {
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
//$(this).css("background", "red");
});
$(cur).slideToggle(300);
});
});
</script>
</head>
<body>
<div class="menuContent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
<ul id="nav">
<li>
<ul id="1">
<li>
<ul id="2">
<li>Profile</li>
<li>Presentations</li>
<li>Recitals</li>
<li>Awards</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>downloads</li>
</ul>
Bharatanatyam</li>
<li>
<ul id="3">
<li>Profile</li>
<li>Presentations</li>
<li>Recitals</li>
<li>Awards</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>downloads</li>
</ul>
Kuchipudi</li>
</ul>
Sailaja </li>
<li>
<ul id="4">
<li>About Sailasudha</li>
<li>Admission</li>
<li>Presentation</li>
<li>Recticals</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>Downloads</li>
</ul>
Sailasudha </li>
<li>
<ul id="5">
<li>Philosophy</li>
<li>
<ul id="6">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul>
<a href="#" class="sub_menu" >Year 1</a></li>
<li><ul id="7">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 2</a></li>
<li><ul id="8">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 3</a></li>
<li><ul id="9">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 4</a></li>
<li><ul id="10">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 5</a></li>
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul>
Nrityanasangama </li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
My Doubt :
When i will click "Kuchipudi" menu, its sub menu will be open. That time "Kuchipudi" background will be change as selected menu.
When i will click "Bharatanatyam" menu, its sub menu will be open. That time "Kuchipudi" background will be change like as previously and "Bharatanatyam" background color will be change as selected menu. I dont know how to change, its background color change.

Would this edit to your fiddle work:
$('.sub_menu').click(function () {
$('a.submenu').removeClass('selected');
$(this).addClass('selected');
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
);
Then add this CSS:
.selected{background-color:#eee; //or whatever colour