We Keep Coding

How to know the logic of multilevel menu event bubbling

I'm trying to understand the logic happening in my basic multilevel menu click event. I understood what happening on clicking on "About" menu in the navigation. And it works as per my expecation of code. But when i click on "Profile" menu (Submenu of "About" menu), JS makes it's sublevel menu "display:none". I tried to think in the aspect of even bubbling. But eventhough the bubbling happens here, it should not be working like this. Actually for me, its really complicated to understand how JS works here. It would be a Great Help if anyone can explain with a simple and understandable way. Thank You Very Much in Advance!!!
let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item) => {
if (item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});
let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item) => {
item.addEventListener("click", (e) => {
e.preventDefault();
let ul = e.target.parentElement.querySelector("ul");
let cs = window.getComputedStyle(ul).display;
if (cs === "none") {
ul.style.cssText = "display:block";
}
else {
ul.style.cssText = "display:none";
}
});
});
.main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;}
.main-navigation ul li {padding:.35rem;background:#f9f9f9;}
.main-navigation ul li ul {padding-left:1rem;display:none;}
.main-navigation ul li a {display:block;text-decoration:none;}
<div class="main-navigation">
<ul>
<li>Home</li>
<li>About +
<ul>
<li>Profile +
<ul>
<li>History</li>
<li>Management</li>
</ul>
</li>
<li>Vision</li>
<li>Mission</li>
</ul>
</li>
<li>Services +
<ul>
<li>Web Design</li>
<li>Web Development</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>

Solution
If you add a console.log inside your click handler you will notice that the event for the nested item is called twice.
You probably knew that it could happen and you used preventDefault.
However, preventDefault is for the browser's default effects (for example, it prevents your page to refresh as you put an href attribute) but in your case the double behaviour is from your own custom listener.
This means, you need to add stopPropagation that prevents further propagation of the current event in the capturing and bubbling phases.
Working Demo
let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item) => {
if (item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});
let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item) => {
item.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
let ul = e.target.parentElement.querySelector("ul");
let cs = window.getComputedStyle(ul).display;
if (cs === "none") {
ul.style.cssText = "display:block";
} else {
ul.style.cssText = "display:none";
}
});
});
.main-navigation ul {
list-style: none;
margin: 0;
padding: 0;
font-family: arial;
}
.main-navigation ul li {
padding: .35rem;
background: #f9f9f9;
}
.main-navigation ul li ul {
padding-left: 1rem;
display: none;
}
.main-navigation ul li a {
display: block;
text-decoration: none;
}
<div class="main-navigation">
<ul>
<li>Home</li>
<li>About +
<ul>
<li>Profile +
<ul>
<li>History</li>
<li>Management</li>
</ul>
</li>
<li>Vision</li>
<li>Mission</li>
</ul>
</li>
<li>Services +
<ul>
<li>Web Design</li>
<li>Web Development</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>

Using .bind and .unbind to move a li

I'm trying to figure out how I can use bind to move the selected li's from box1 to box2 and from box2 back to box1. Stuck on this and need some help. Also when a li is selected and moved over to the next box by clicking Move Right, they stack on every click. How can I fix that?
code:
$(document).ready(function(){
$(".box1 ul li").click(function(){
if($(this).hasClass("active-li")==true)
{
$(this).removeClass("active-li");
}
else
{
$(this).addClass("active-li");
}
});
$(".box1 ul li").click(function(){
var x=$(this).data("drink");
$("#btt1").click(function(){
$(".box2 ul").append(x);
$(x).bind("click", bindLi);
});
});
$(x).bind("click", bindLi);
});
function bindLi(){
alert("hello");
}
CSS:
.box1{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:50px;}
.box2{border:1px solid black; width:200px; height:200px; float:left; margin-top:100px; margin-left:100px;}
.button-container{width:80px; height:30px; float:left; margin-top:200px; margin-left:100px;}
.active-li{background-color:yellow;}
ul li:hover{cursor:pointer;}
HTML:
<div class="box1" id="box1">
<ul>
<li data-drink="beer">
Beer
</li>
<li data-drink="water">
Water
</li>
<li data-drink="soda">
Soda
</li>
<li data-drink="juice">
Juice
</li>
</ul>
</div>
<div class="button-container">
<input type="button" id="btt1" name="btt1" value="Move Right" />
<input type="button" id="btt2" name="btt2" value="Move Left" />
</div>
<div class="box2" id="box2">
<ul></ul>
</div>
JSFiddle:
https://jsfiddle.net/fgo455zt/

Please take a look at below code:
https://jsfiddle.net/fgo455zt/5/
We can simply the code as follows:
$(document).ready(function() {
$(".box1 ul li, .box2 ul li").click(function() {
$(this).toggleClass("active-li"); //highlight the clicked li
});
$("#btt1, #btt2").click(function() {
var sourceUL = null;
var targetUL = null;
//depending upon which button clicked we are moving selected li to and from source to target UL
if ($(this).attr("id") == "btt1") {
sourceUL = $(".box1 ul");
targetUL = $(".box2 ul");
} else {
sourceUL = $(".box2 ul");
targetUL = $(".box1 ul");
}
$(sourceUL).find("li.active-li").each(function() {
$(this).removeClass("active-li"); //removing the active class before moving the li
$(targetUL).append($(this));
});
});
});

How to select the li element when clicked?

I have the following code. As soon as I move away the cursor the background color back to white right now. How can I select the li element when the user clicks?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-sm-2 col-md-2" id="sidebar-wrapper">
<div id="sidebar">
<ul class="nav list-group" style="cursor:pointer;">
<li class="active">
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order</a>
</li>
<li>
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order Jobs</a>
</li>
</ul>
</div>
</div>

Since you already use jQuery, why not just using the click function.
For selecting only one item:
$('.nav li').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
jsFiddle
For selecting multiple items:
$('.nav li').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
jsFiddle
In your CSS, override the background-color as follows. It's actually set on the <a> tag, not the <li> in Bootstrap.
.nav>li.active>a {
background-color: #ccc;
}

Use it like this:
<style type="text/css">
.nav li.active {
background-color:grey;
}
</style>
<div class="col-sm-2 col-md-2" id="sidebar-wrapper">
<div id="sidebar">
<ul class="nav list-group" style="cursor:pointer;">
<li class="active">
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order</a>
</li>
<li>
<a class="list-group-item"><i class="icon-home icon-1x"></i>Work Order Jobs</a>
</li>
</ul>
</div>
</div>
and jQuery like this:
<script type="text/javascript">
$(document).ready(function() {
$("#sidebar li").click(function(){
$("#sidebar li").removeClass('active');
$(this).addClass('active') ;
});
});
</script>

You can do like this, where you add a label and an input to your li, and no script is needed.
Update fiddle
HTML
<label><input type="radio" class="hideme" name="li">
<a class="list-group-item">
<i class="icon-home icon-1x"></i>Work Order Jobs
</a>
</label>
CSS
label {
display: inline-block;
width: 100%;
}
.hideme {
display: none;
}
.hideme:checked + .list-group-item{
background-color: gray
}

You can add an active class to your links.
HTML
<a class="list-group-item active>Work Order</a>
CSS
.list-group-item.active {
background-color: gray
}
To change background-color on click, you have to use jQuery.
$( document ).ready(function() {
$(".nav li a").click(function(){
$('li a.active').removeClass('active');
$(this).addClass('active') ;
});
});
Updated JSFiddle

put your li tag in another a tag then use any of these pseudo-classes
w3schools pseudo classes
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;

why doesn't this drop-down menu work with mouseover and leave?

I want it to display "you" under "Home" when hovering and disappearing when mouse leaving:
// HTML
<ul>
<li><a id="homeBox" href="#">Home</a>
<ul><li><a id="homeSub" href="#">you</a></li></ul>
</li>
</ul>
// javaScript
var homeB= document.getElementById("homeBox");
var homeS = document.getElementById("homeSub")
homeBox.mouseover = function() {
var homeS = document.getElementById("homeSub").style.display= "block";
}
homeBox.mouseleave = function() {
var homeS = document.getElementById("homeSub").style.display= "none";
}
// CSS
<style>
ul li ul li a #homeSub {display: hidden;}
</style>

Why Javascript? Use simple CSS Solution.
ul li ul{display: none;}
ul li:hover ul{display: block;}
DEMO

There were quite a few issues. If you have any questions let me know
homeBox.mouseover
There is no homeBox use homeB, and mouseover isnt an event handler onmouseover is.
homeB.onmouseover
ul li ul li a #homeSub {display: hidden;}
This is looking for a link with a child that has the id homeSub, and display: hidden should be display: none
ul li ul li a#homeSub {display: none;}
var homeS = document.getElementById("homeSub").style.display= "block";
You've already defined homeS
homeS.style.display = 'block';
var homeB = document.getElementById("homeBox");
var homeS = document.getElementById("homeSub");
homeB.onmouseover = function() {
homeS.style.display = "block";
}
homeB.onmouseout = function() {
homeS.style.display = "none";
}
ul li ul li a#homeSub {
display: none;
}
<ul>
<li><a id="homeBox" href="#">Home</a>
<ul><li><a id="homeSub" href="#">you</a></li></ul>
</li>
</ul>

You don't need any javascript for this functionality. Just use CSS - http://jsfiddle.net/akq1e5o6/
P.S.: there is no avaliable hidden value for display property

<ul>
<li><a id="homeBox" href="#">Home</a>
<ul><li><a id="homeSub" href="#">you</a></li></ul>
</li>
</ul>
-Use onmouseover instead of mouseover
-Put your Javascript between script-tags, and in a function that will execute after the page has loaded (and use 'none' instead of 'hidden').
<script>
(function() {
var homeB= document.getElementById("homeBox");
var homeS = document.getElementById("homeSub");
homeB.onmouseover = function() {
homeS.style.display = "block";
}
homeB.onmouseleave = function() {
homeS.style.display= "none";
}
})();
</script>
-And adjust your stylesheet:
<style>
#homeSub {display: none;}
</style>

Adding active class in menu only works on first page

I have nav links that become active once they come into the window. I need to implement this on three separate pages on my website but the following scripts only work for the first page.
var services_refresh = function () {
// do stuff
console.log('Stopped Scrolling');
if ($('#ct_scans.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#ct_scans"]').addClass('active');
} else if ($('#xray.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#xray"]').addClass('active');
} else if ($('#fluoroscopy.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#fluoroscopy"]').addClass('active');
} else if ($('#mri.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#mri"]').addClass('active');
} else if ($('#neuroimaging.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#neuroimaging"]').addClass('active');
} else if ($('#nuclear_medicine.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#nuclear_medicine"]').addClass('active');
} else if ($('#ultrasound.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#ultrasound"]').addClass('active');
} else if ($('#mammography.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#mammography"]').addClass('active');
} else if ($('#breast_ultrasound.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#breast_ultrasound"]').addClass('active');
} else if ($('#breast_biopsy.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#breast_biopsy"]').addClass('active');
} else if ($('#breast_mri.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#breast_mri"]').addClass('active');
} else if ($('#osteoporosis.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#osteoporosis"]').addClass('active');
}
};
Here is my HTML for the first page that works:
<ul id="our_services_sub_sections" class="diagnostic_images">
<li><a class="scroll active" href="#ct_scans">CT Scans</a></li>
<li><a class="scroll" href="#xray">X-Ray</a></li>
<li><a class="scroll" href="#fluoroscopy">Fluoroscopy</a></li>
<li><a class="scroll" href="#mri">MRI</a></li>
<li><a class="scroll" href="#neuroimaging">Neuroimaging</a></li>
<li><a class="scroll" href="#nuclear_medicine">Nuclear Medicine</a></li>
<li><a class="scroll" href="#ultrasound">Ultrasound</a></li>
</ul>
Here is my HTML for the second page which does not work:
<ul id="our_services_sub_sections" class="womens_imaging">
<li><a class="scroll active" href="#mammography">Mammography</a></li>
<li><a class="scroll" href="#breast_ultrasound">Breast Ultrasound</a></li>
<li><a class="scroll" href="#breast_biopsy">Breast Biopsy</a></li>
<li><a class="scroll" href="#breast_mri">Breast MRI</a></li>
<li><a class="scroll osteo" href="#osteoporosis">Osteoporosis<br />Evaluation (DEXA)</a></li>
</ul>
Why is this not working?

Since you are including the function on every page using an include, you probably need to call the function each time a page is loaded.
So, inside each page (just after the opening <body> tag) run your function from inside a JS script block like so:
<script type="text/javascript">
//call the function
services_refresh();
</script>
Also, instead of making your function a variable - I would just make it a plain function like so:
function services_refresh(){
// code here
}

I finally figured out how to solve my problem.
Here is an example of what I had to do for each of the three pages:
var services_refresh = function () {
if($('#firstpage.anchor').length != 0) {
if($('#firstpage.anchor').visible()) {
$('#nav_sub_section li a').removeClass('active');
$('#nav_sub_section li a[href="#firstpage"]').addClass('active');
}
} else if($('#secondpage.anchor').length != 0) {
if($('#secondpage.anchor').visible()) {
$('#nav_sub_section li a').removeClass('active');
$('#nav_sub_section li a[href="#secondpage"]').addClass('active');
}
} else if($('#thirdpage.anchor').length != 0) {
if($('#thirdpage.anchor').visible()) {
$('#nav_sub_section li a').removeClass('active');
$('#nav_sub_section li a[href="#thirdpage"]').addClass('active');
}
}
};