Develop Reference

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 - Close submenu if user selects another menu item or clicks outside of menu

I'm trying to figure out how to close sub menu drop downs, if a user selects another menu or clicks outside of the menu (clicks something else on the page). I've read and tried a few different ways, but haven't gotten anywhere. I Just confused myself as to what is the best or right approach. Using regular JavaScript only - trying to learn.
HTML
<div class="container">
<div class="inner-wrap">
<ul id="filters">
<li>one
<ul class="dropM">
<li>I belong to one</li>
</ul>
</li>
<li>two
<ul class="dropM">
<li>I belong to two</li>
</ul>
</li>
<li>three
<ul class="dropM">
<li>I belong to three</li>
</ul>
</li>
<li>four
<ul class="dropM">
<li>I belong to four</li>
</ul>
</li>
</ul>
</div>
CSS
html {
box-sizing: border-box;
background:#ffc600;
font-family:'helvetica neue';
font-size: 20px;
font-weight: bold;
}
body {
margin: 0 auto;
padding: 50px 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
div.container {padding: 10px; background: #bada55; text-align: center;}
div.inner-wrap {margin: 0 auto; position: relative; display: inline-block;}
ul#filters { list-style: none;}
ul#filters li {display: inline-block; position: relative;}
ul#filters li > ul.dropM {list-style: none; position: absolute; top: 30px; left: -40px; padding: 15px; border: 1px solid #ccc; background: #fff; display: block; min-width: 200px; display: none; z-index: 201;}
ul#filters li > ul.dropM.open {display: block;}
ul#filters {display: inline-block;}
ul#filters li a.filterBtn {text-decoration: none; padding: 10px 20px; background: #ccc; color: black;}
JS
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e){
filterMenuBtn.forEach(cliks => {
//console.log(cliks);
if(cliks === this) {
this.nextElementSibling.classList.toggle('open');
//console.log('i clicked this one');
}
});
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
JSFiddle

Update your javascript to this
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e) {
if (e.type == 'click'){
e.currentTarget.nextElementSibling.classList.toggle('open');
} else {
e.currentTarget.nextElementSibling.classList.remove('open');
}
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
filterMenuBtn.forEach(cliks => cliks.addEventListener('blur', openDropMenu));

Dropdown menu closing after clicking on any input box

I have created a drop-down menu, in which I have created a form for search criteria.
Now, whenever I click on any input box then the menu gets closed.
Is there any way to solve it.
here is my html code :
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
Search<b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<center>Search Criteria</center>
<hr>
<li class="col-sm-3">
<ul>
<li>Profile ID</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Name</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Age</li>
<li>
<input type="text" size="5"> to
<input type="text" size="5">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Date of Birth</li>
<li>
<input type="date">
</li>
</ul>
</li>
</ul>
</li>
and my css code :
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}

Try to use e.stopPropagation():
$(document).on('click', '.dropdown', function (e) {
e.stopPropagation();
});
Bootply Demo

change the color of the particular header on mouse over

My problem is when i mouse over the fois header its text doesn't changes to white color i don't know where i am wrong.or what to include.please help me........
another problem when the fois tab is active the color of the text appear as white
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- <link href="css.css" rel="stylesheet" />-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="accord.js"></script>
<style>
.wrap {
margin-left: 0px;
margin-top: 0px;
width: 100px;
}
.accordion1 {
width: 178px;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #ddd;
}
.accordion1 h2 {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
text-decoration: none;
padding: .25em .25em .25em 2em;
color: #333;
background: url('compo_images/gradient_v_gray.gif') repeat-x;
background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.accordion1 h2:hover {
background: url('compo_images/gradient_v_orange.gif') repeat-x;
color: white;
}
.accordion1 li div.content {
padding: 3px;
background: #fcfbfb;
border-bottom: 1px solid #ddd;
/*border: 1px solid #ddd;*/
}
.accordion1 li:hover h2 {
color: white;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
.accord > li {
padding: 0;
list-style-type: none;
}
.accord > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 12px;
color: #5f5c5c;
background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
}
.accord > li > ul > li > a {
text-decoration: none;
color: #5f5c5c;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
padding-left: 17px;
}
.accord > li > ul {
list-style-type: none;
text-align: left;
margin: 0;
padding: 1px;
}
.accord {
text-decoration: none;
padding-left: 5px;
}
.accord > li > a:hover {
color: #f8b106;
}
.accord > li > ul > li > a:hover {
color: #f8b106;
}
.accordion1 > li > h2.active {
color: white;
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
<ul class="accord">
<li>
main link1
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
<li>Link Five</li>
</ul>
</li>
<li>
main link2
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
<li>Link Five</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<h2 id="fois">FOIS</h2>
</li>
<li>
<h2>ASP</h2>
<div class="content">
<ul>
</ul>
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
content PTT
</div>
</li>
</ul>
</div>
<!-- wrap -->
</body>
</html>
accord file
jQuery(function ($) {
$('.accord li').hover(function () {
$(this).find('ul').stop(true, true).slideDown()
}, function () {
$(this).find('ul').stop(true, true).slideUp()
}).find('ul').hide()
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function () {
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
})
})

Because it's wrapped in <a></a> tag and the others are not wrapped in <a>
Demo
<li>
<h2 id="fois">FOIS</h2> // Your <h2> is wrapped in <a></a> here
</li>

You are declaring color: black; using inline CSS, which will be only overridden if you use !important in your stylesheet.
Secondly you need to target a element and not h2 because a will not inherit the parent elements color unless you specify something like a {color: inherit;} which will make all the a elements in your document inherit parent color, or to be specific you can use .accordion1 li h2 a {color: inherit;}, if you use this selector, than you don't have to target a else you need to as I've shared below..
.accordion1 li:hover h2 a {
color: white !important;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
I would suggest you to remove the inline style instead, and you won't have to use the !important anymore.
Demo

Change
<h2 id="fois">FOIS</h2>
To
<h2 id="fois">FOIS</h2>
And change
.accordion1 li:hover h2 {
To
.accordion1 li:hover h2,
.accordion1 li:hover h2 a {

Looks to me that your problem is with the inline style on the anchor element. This has a higher specificity than any style in a style sheet so should be used with moderation.
If you remove
color:black
from the anchor, and add:
color:black
to:
.accordion1 h2
That should do the trick.

Add Below class in your style
#fois a:hover{
color: white !important;
}

toggle images for expand all and collapse all

I am trying to swap images of collapse all and expand all on click but i am reallly not getting it please can any one help me ... thanks in advance
here is the the link for the sample
http://www.ornusweb.com/showcase/checking/collapsible-menu.html
everything is working fine except the expan all collapse all buttons wen we click on it.
it should swap images
please help me !!!
Here is the css
body {
font: 10pt Arial, Helvetica, Sans-serif;
}
a {
text-decoration: none;
}
#example1,
#example2,
#example3,
#example4,
#example5 {
float: left;
}
.expand_all{
cursor: pointer;
}
.collapse_all {
cursor: pointer;
}
.example_menu {
font-size: 90%;
list-style: none;
margin: 0;
padding: 0;
vertical-align: top;
width: 624px;
}
.example_menu ul {
display: none;
list-style: none;
padding: 0;
}
#menu1,
#menu2,
#menu3,
#menu4,
#menu5 {
margin: 0;
}
#menu1 li,
#menu2 li,
#menu3 li,
#menu4 li,
#menu5 li,
.example_menu li {
background-image: none;
margin: 0;
padding-bottom: 1px;
}
.example_menu ul ul {
display: block;
}
.example_menu ul ul li a {
padding-left: 20px;
width: 109px;
}
.example_menu a {
color: #000;
cursor: pointer;
display: block;
font-weight: bold;
margin-left: 0;
padding: 10px 2px 2px 17px;
width: 605px;
height: 24px;
}
.example_menu a.expanded {
background: #E8E8E8 url('images/minusimg1.png') no-repeat 592px 50%;
}
.example_menu a.collapsed {
background: #E8E8E8 url('images/plusimg1.png') no-repeat 592px 50%;
}
.example_menu a:hover {
text-decoration: none;
}
.example_menu ul a {
background: #e8e8e8;
border-top: 2px solid #fff;
color: #000;
display: block;
font-weight: normal;
padding: 2px 2px 2px 10px;
width: 119px;
}
.example_menu ul a:link {
font-weight: normal;
}
.example_menu ul a:hover {
background : #f5f5f5;
text-decoration: underline;
}
.example_menu li.active a {
background: #fff;
}
.example_menu li.active li a {
background: #e8e8e8;
}
#menu1 li.footer,
#menu2 li.footer,
#menu3 li.footer,
#menu4 li.footer,
#menu5 li.footer,
.example_menu .footer {
background: transparent url('images/footer.jpg') no-repeat 0 0;
border-top: 2px solid #fff;
height: 9px;
line-height: 15px;
margin: 0 0 10px 0;
width: 131px;
}
.example_menu .footer span {
display: none;
}
/* nadeem css */
.newstyles{ font: 20px/18px arial;color: #0B0B0C;margin: 5px 0px 20px 5px;}
.newstyles li{ height: 32px;font: bold 12px/32px arial;color: #0B0B0C;}
.newstyline{clear: both;height: 1px;background-color: #E6E6E6;width: 100%;margin: 1px 0px 3px 0px;}
}
here is the js
$(document).ready(function() {
setTimeout(function() {
// Slide
$('#menu1 > li > a.expanded + ul').slideToggle('medium');
$('#menu1 > li > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});
$('#example1 .expand_all').click(function() {
$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
});
$('#example1 .collapse_all').click(function() {
$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
});
}, 250);
});
and here is the html
<div id="example1">
<div><a class="expand_all"><img src="images/close.jpg" class="img-swap" /></a><a class="collapse_all"><img src="images/open.jpg" alt="" /></a></div>
<ul id="menu1" class="example_menu">
<li><a class="expanded">Section A</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section B</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section C</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
</ul>
</div>

Guessing it is the two images in the top, you could do this:
<div>
<a class="expand_all" style="display: none;" onclick="$('.expand_all').hide();$('.collapse_all').show()">
<img class="img-swap" src="images/toggle-buttons_01.png">
</a>
<a class="collapse_all" onclick="$('.expand_all').show();$('.collapse_all').hide()" style="display: inline;">
<img alt="" src="images/toggle-buttons_02.png">
</a>
</div>
Simply hiding the irrelevant one....not really swapping images though.