Develop Reference

How to make addEventListener 'click' work on two menu items with same class

Page: https://ensjotannklinikk.no/
Here's a fiddle
The first menu item called "Behandlinger" is set up with this JS (courtesy of biberman) to make the submenu emerge and retract properly.
var submenu = document.querySelector('.behandlinger-meny');
var menuTrigger = document.querySelector('.behandlinger-item');
//javascript version of jQuery isChild()
function isChild(item, parentItem) {
while (item != undefined && item != null && item.tagName.toUpperCase() != 'BODY'){
if (item == parentItem){
return true;
}
item = item.parentNode;
}
return false;
}
menuTrigger.addEventListener('click', function() {
submenu.style.height = '55px';
});
document.querySelector('body').addEventListener('click', function(e) {
if ( !isChild(e.target, menuTrigger) && !isChild(e.target, submenu) ) {
submenu.style.height = 0;
}
});
document.addEventListener('keyup', function(e) {
if ( e.key == 'Escape' ) {
submenu.style.height = 0;
}
});
Why is this not working on mobile? I wish for the submenu (.behandlinger-meny) height set to 55px when the menu item Behandlinger (.behandlinger-item) is clicked. It works perfectly, except not on the menu item click on mobile.
Realized the mobile menu has a <nav> of its own, which may affect the event listener. I have updated both the fiddle and the simplified structure below as well as the core question. Seems really close to a simple solution now.
Simplified structure:
.behandlinger-meny {
height: 0;
transition: all .3s cubic-bezier(0.4, 0.0, 0.2, 1);
overflow: hidden;
}
<div id="wrapper">
<header>
<nav class="main-menu">
<ul>
<li class="behandlinger-item">Behandlinger</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
</nav>
<nav class="mobile-main-menu">
<ul>
<li class="mobile-item behandlinger-item">Behandlinger</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
</nav>
</header>
<section> <!-- Separated to follow page scroll -->
<div id="behandlinger"> <!-- Scroll to position on item click -->
<nav class="behandlinger-meny">
<script></script> <!-- Script in question -->
<ul>
<li><a>Sub item 1</a></li>
<li><a>Sub item 2</a></li>
<li><a>Sub item 3</a></li>
</ul>
</nav>
</div>
</section>
<main>
…
</main>
</div>
Runnable version:
var submenu = document.querySelector('.behandlinger-meny');
var menuTrigger = document.querySelector('.behandlinger-item');
//javascript version of jQuery isChild()
function isChild(item, parentItem) {
while (item != undefined && item != null && item.tagName.toUpperCase() != 'BODY'){
if (item == parentItem){
return true;
}
item = item.parentNode;
}
return false;
}
menuTrigger.addEventListener('click', function() {
submenu.style.height = '55px';
});
document.querySelector('body').addEventListener('click', function(e) {
if ( !isChild(e.target, menuTrigger) && !isChild(e.target, submenu) ) {
submenu.style.height = 0;
}
});
document.addEventListener('keyup', function(e) {
if ( e.key == 'Escape' ) {
submenu.style.height = 0;
}
});
.behandlinger-meny {
height: 0;
transition: all .3s cubic-bezier(0.4, 0.0, 0.2, 1);
overflow: hidden;
}
<div id="wrapper">
<header>
<nav class="main-menu">
<ul>
<li class="behandlinger-item">Behandlinger</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
</nav>
<nav class="mobile-main-menu">
<ul>
<li class="mobile-item behandlinger-item">Behandlinger</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
</nav>
</header>
<section> <!-- Separated to follow page scroll -->
<div id="behandlinger"> <!-- Scroll to position on item click -->
<nav class="behandlinger-meny">
<script></script> <!-- Script in question -->
<ul>
<li><a>Sub item 1</a></li>
<li><a>Sub item 2</a></li>
<li><a>Sub item 3</a></li>
</ul>
</nav>
</div>
</section>
<main>
…
</main>
</div>

Since you have two triggers and your event listener is only attached to the first with querySelector the second trigger has no listener.
You can use querySelectorAll and attach the event listener in a for loop to each selected trigger. Because you want a transition you have to use 'max-height' instead of 'height' since transition doesn't work with height.
For closing the submenu when clicking somewhere else (except trigger or submenu) i made a function isRelated() that checks if the click target is the trigger itself, the submenu or a child of both.
Working example with multiple triggers (jQuery example below):
document.addEventListener('DOMContentLoaded', function() {
var submenu = document.querySelector('.behandlinger-meny');
var menuTrigger = document.querySelectorAll('.behandlinger-item');
function isRelated(item, parentSelector) {
while (item != undefined && item != null && item.tagName.toUpperCase() != 'BODY') {
parents = document.querySelectorAll(parentSelector);
for (i = 0; i < parents.length; i++) {
if (item == parents[i]) {
return true;
}
}
item = item.parentNode;
}
return false;
}
for (i = 0; i < menuTrigger.length; i++) {
menuTrigger[i].addEventListener('click', function() {
submenu.style.maxHeight = '1000px';
});
}
document.querySelector('body').addEventListener('click', function(e) {
if (!isRelated(e.target, '.behandlinger-item') && !isRelated(e.target, '.behandlinger-meny')) {
submenu.style.maxHeight = 0;
}
});
document.addEventListener('keyup', function(e) {
if (e.key == 'Escape') {
submenu.style.maxHeight = 0;
}
});
});
header {
display: flex;
}
.behandlinger-meny {
max-height: 0;
width: 150px;
background-color: #ddd;
transition: all .3s cubic-bezier(0.4, 0.0, 0.2, 1);
overflow: hidden;
}
<div id="wrapper">
<header>
<nav class="main-menu">
<ul>
<li class="behandlinger-item">Behandlinger</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
</nav>
<nav class="mobile-main-menu">
<ul>
<li class="mobile-item behandlinger-item">Behandlinger</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
</nav>
</header>
<section>
<div id="behandlinger">
<nav class="behandlinger-meny">
<ul>
<li><a>Sub item 1</a></li>
<li><a>Sub item 2</a></li>
<li><a>Sub item 3</a></li>
</ul>
</nav>
</div>
</section>
<main>
…
</main>
</div>
jQuery example:
$().ready(function() {
var submenu = $('.behandlinger-meny');
$('.behandlinger-item').on('click', function() {
submenu.css('maxHeight', '1000px');
});
$('body').on('click', function(e) {
if (!$(e.target).parents().is('.behandlinger-item')
&& !$(e.target).parents().is('.behandlinger-meny')) {
submenu.css('maxHeight', 0);
}
});
$(document).on('keyup', function(e) {
if (e.key == 'Escape') {
submenu.css('maxHeight', 0);
}
});
});
header {
display: flex;
}
.behandlinger-meny {
max-height: 0;
width: 150px;
background-color: #ddd;
transition: all .3s cubic-bezier(0.4, 0.0, 0.2, 1);
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<header>
<nav class="main-menu">
<ul>
<li class="behandlinger-item">Behandlinger</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
</nav>
<nav class="mobile-main-menu">
<ul>
<li class="mobile-item behandlinger-item">Behandlinger</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
</nav>
</header>
<section>
<div id="behandlinger">
<nav class="behandlinger-meny">
<ul>
<li><a>Sub item 1</a></li>
<li><a>Sub item 2</a></li>
<li><a>Sub item 3</a></li>
</ul>
</nav>
</div>
</section>
<main>
…
</main>
</div>

event.target of a jQuery click event returning the child of the clicked element

I have a jQuery click event on a hyperlink containing an image. Both the hyperlink and the image has seperate ids. I'd expect that when I click the hyperlink, the code event.target.id inside the event handler would return the hyperlink id as the event is tied to the hyperlink, but it returns the image id. Why is that? Is there any way to always make the element tied to the event become the event.target?
HTML:
<div id="menuContainer">
<ul id="menu">
<li><a id="home"><img id="logo" src="img/logo.png" alt="logo"></a></li>
<li><a id="about">Om oss</a></li>
<li><a id="concept">Konsept</a></li>
<li><a id="history">Data</a></li>
<li><a id="store">Butikk</a></li>
</ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>
JS:
function Page(pageId, linkId, file, backgroundImg, showPage){
this.id = pageId;
this.link = linkId;
this.content = file;
this.img = backgroundImg;
this.show = showPage;
this.loadPage = function() {
if (this.show && $cont.is(":hidden")) $cont.show();
else if (!this.show && $cont.is(":visible")) $cont.hide();
if (this.content != "") $cont.load(this.content);
else $cont.html("");
$("#frontpage").css("backgroundImage", "url(img/" + this.img + ")");
}
}
var pages = [];
var linkToPageId = {};
function addPage(linkId, file, backgroundImg, showPage = true) {
var pageId = pages.length;
var newPage = new Page(pageId, linkId, file, backgroundImg, showPage);
pages.push(newPage);
linkToPageId[linkId] = pageId;
}
addPage("home", "", "frontpage.jpg", false);
$("#menu a").click(function(event){
console.log(event.target.id);
pages[linkToPageId[event.target.id]].loadPage();
});
PS. I know this can be quickfixed by giving changing the linkId of this specific Page object to "logo" instead of "home", but it kinda spaghettifies the code. I would like to see if there's any other option first.
PSS. I also know JS has actual Classes instead of the function-based "class" I've used. It's irrelevant to my question.

The event.target will always be the element that dispatched the event. If you click on an element inside a container, then no matter what element the listener is attached to, the event.target will be the element inside the container.
If you want a reference to the element the listener is attached to, use this or event.currentTarget:
$("#menu a").click(function() {
console.log(this.id);
// pages[linkToPageId[this.id]].loadPage();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuContainer">
<ul id="menu">
<li>
<a id="home"><img id="logo" src="img/logo.png" alt="logo"></a>
</li>
<li><a id="about">Om oss</a></li>
<li><a id="concept">Konsept</a></li>
<li><a id="history">Data</a></li>
<li><a id="store">Butikk</a></li>
</ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>
$("#menu a").click(function() {
console.log(event.currentTarget.id);
// pages[linkToPageId[event.currentTarget]].loadPage();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuContainer">
<ul id="menu">
<li>
<a id="home"><img id="logo" src="img/logo.png" alt="logo"></a>
</li>
<li><a id="about">Om oss</a></li>
<li><a id="concept">Konsept</a></li>
<li><a id="history">Data</a></li>
<li><a id="store">Butikk</a></li>
</ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>

you use event.currentTarget which points to the element that you attached the listener. It does not change as the event bubbles.
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
Hope this was helpful.

There is a CSS tricks that will ignore hover and click events for the element on which is set the rule:
#menu a img {
pointer-events: none;
}
This rule will cancel your :hover rules on that element (and children because of the cascading beauty of CSS).
document
.querySelectorAll("#menu a")
.forEach(
(element) => element.addEventListener(
"click",
(event) => document.querySelector("#click-target").textContent = event.target.outerHTML
)
);
#menu a span.icon {
pointer-events: none;
}
#menu a span:hover {
color: #F0F;
font-weight: 700;
}
<p>Try me by clicking on links or on the "checkbox" icons.</p>
<ul id="menu">
<li><span class="icon">☑ </span> pointer-events: none
<li><span>☐ </span> No pointer-events rule
</ul>
<div id="click-target"></div>

JavaScript event-handler: Toggle visibility of adjacent element. Code not working

I have nested unordered-lists. Each unordered-list has an h1 tag as its 'previous-sibling' tag. My goal is to click on an h1 tag and toggle the visibility of the unordered-list that comes right after it.
I am also trying to also assign classNames to each of unordered lists, based on the their title (h1) tag.
Is anyone able to help me understand why my code is not working?
Here is the code:
window.onload = function() {
let titles = document.getElementsByTagName('h1');
for (let i = 0 ; i < titles.length ; i++) {
let title = titles[i];
//grab the text in the h1 element, and add that text as a class to the h1:
let className = title.innerHTML.toLowerCase();
title.className += title.className.length ? ' ' + className : className;
let section = document.querySelectorAll(`.${className} + ul`);
if(section.length) {
section[0].className += section[0].className.length
?
` ${className} section`
:
`${className} section`;
//ADD EVENT HANDLER TO THE TITLE.
//SHOULD HIDE AND SHOW THE ADJASCENT UL ELEMENT:
title.onclick = function(e) {
section[0].classList.toggle('hide');
};
}
}
};
/* trying to toggle visibility with this class*/
.hide {
display: none;
}
/*basic styles to separate elements:*/
h1 {
color: olive;
}
ul {
border: solid orange 1px;
}
li {
//border: solid magenta 1px;
}
<div id="foods">
<h1>Food</h1>
<ul>
<li>
<h1>Fruit</h1>
<ul>
<li>
<h1>tropical</h1>
<ul>
<li>banana</li>
<li>pineapple</li>
<li>mango</li>
</ul>
</li>
<li>
<h1>stone</h1>
<ul>
<li>peach</li>
<li>pear</li>
<li>appricot</li>
</ul>
</li>
</ul>
</li>
<li>
<h1>Vegetables</h1>
<ul>
<li>
<h1>leafy</h1>
<ul>
<li>lettuce</li>
<li>spinach</li>
<li>kale</li>
</ul>
</li>
<li>
<h1>root</h1>
<ul>
<li>carrot</li>
<li>turnip</li>
<li>potato</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

The chief issue is you're using the wrong CSS property. You want display, not visibility:
.hide {
display: none;
}
If you were using visibility, the value would be hidden, but it would continue to take up room in the layout, which I'm sure isn't what you want.
But separately, the code to hook up those event handlers and add those classes (you've said you're using them for things later) can be a bit simpler:
window.onload = function() {
function toggleNext() {
this.nextElementSibling.classList.toggle("hide");
}
let titles = document.getElementsByTagName('h1');
for (let i = 0 ; i < titles.length ; i++) {
const title = titles[i];
const section = title.nextElementSibling;
const titleClass = title.innerHTML.toLowerCase();
title.classList.add(titleClass);
section.classList.add(titleClass, "section");
titles[i].addEventListener("click", toggleNext);
}
};
Live Example:
window.onload = function() {
function toggleNext() {
this.nextElementSibling.classList.toggle("hide");
}
let titles = document.getElementsByTagName('h1');
for (let i = 0 ; i < titles.length ; i++) {
const title = titles[i];
const section = title.nextElementSibling;
const titleClass = title.innerHTML.toLowerCase();
title.classList.add(titleClass);
section.classList.add(titleClass, "section");
titles[i].addEventListener("click", toggleNext);
}
};
/* trying to toggle visibility with this class*/
.hide {
display: none;
}
/*basic styles to separate elements:*/
h1 {
color: olive;
}
ul {
border: solid orange 1px;
}
li {
//border: solid magenta 1px;
}
<div id="foods">
<h1>Food</h1>
<ul>
<li>
<h1>Fruit</h1>
<ul>
<li>
<h1>tropical</h1>
<ul>
<li>banana</li>
<li>pineapple</li>
<li>mango</li>
</ul>
</li>
<li>
<h1>stone</h1>
<ul>
<li>peach</li>
<li>pear</li>
<li>appricot</li>
</ul>
</li>
</ul>
</li>
<li>
<h1>Vegetables</h1>
<ul>
<li>
<h1>leafy</h1>
<ul>
<li>lettuce</li>
<li>spinach</li>
<li>kale</li>
</ul>
</li>
<li>
<h1>root</h1>
<ul>
<li>carrot</li>
<li>turnip</li>
<li>potato</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Side note: I would recommend not using window.load unless you really need this code to wait for all images, stylesheets, etc., to fully load before running. Instead, just make sure the code is in a script tag at the end of the document, just prior to the closing </body> tag.

How to select link of current page

I am trying to have my links in a menu styled when I mouse over them.
Then when the mouse leaves the link (without clicking on it) I want the current link to go back to being styled.
html:
<div id="header">
<div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
<nav class="cf" id="menu">
<ul>
<li>ABOUT</li>
<li>GALLERY</li>
<li>BIO</li>
<li>CONTACT</li>
<li>HOME</li>
</ul>
</nav>
</div>
css
.current { color: #FFBB3F;}
js
$( "nav a" ).on('mouseover', function(){
$( "nav a.current" ).removeClass("current");
$(this).addClass("current");
});
$( "nav a" ).on('mouseleave', function(){
$(this).removeClass("current");
var pageURL = $(location).attr("href");
$('a[href="pageURL"]').addClass("current");
});
but this is not working. if I do an alert
alert(pageURL);
it gives me the path to the current page, and if I paste just an href
$('a[href="index.html"]').addClass("current");
it does style that link, but obviously I would want the current link to be styled. First time I try this. Any help appreciated. Thanks

This will add and remove the current class as well as style links being hovered over:
var anchors = document.querySelectorAll("#menu a");
// Assign mouseover and mouseout event handlers to each anchor
for(var i = 0; i < anchors.length; i++){
anchors[i].addEventListener("mouseover", styleIn);
anchors[i].addEventListener("mouseout", styleOut);
}
// This will hold a reference to whichever anchor has the current class
var currentAnchor = null;
function determineCurrent(){
for(var i = 0; i < anchors.length; i++){
if(anchors[i].classList.contains("current")){
currentAnchor = anchors[i];
}
}
}
function styleIn(e){
determineCurrent();
e.target.classList.add("hover");
currentAnchor.classList.remove("current");
}
function styleOut(e){
e.target.classList.remove("hover");
currentAnchor.classList.add("current");
}
a { text-decoration:none; }
.current { color: #FFBB3F; }
.hover { text-decoration:underline;}
<div id="header">
<div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
<nav class="cf" id="menu">
<ul>
<li>ABOUT</li>
<li>GALLERY</li>
<li>BIO</li>
<li>CONTACT</li>
<li>HOME</li>
</ul>
</nav>
</div>

Using just CSS, a combination of rules can get really close (perhaps close enough depending on how #menu is), see comments in CSS section:
/*
1. Color the current one if the menu isn't being hovered
2. Color the current link if being hovered
*/
#menu:not(:hover) .current, /* 1 */
#menu a:hover { /* 2 */
color: #FFBB3F;
}
<div id="header">
<div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
<nav class="cf" id="menu">
<ul>
<li>ABOUT</li>
<li>GALLERY</li>
<li>BIO</li>
<li>CONTACT</li>
<li>HOME</li>
</ul>
</nav>
</div>
That CSS-only version has the issue that if you're not hovering a link but you are hovering the #menu, nothing is highlighted. I can't think of a pure CSS way to handle that, so a bit of JavaScript (see comments):
// Set a class on #menu only when hovering a link
$("#menu")
.on("mouseenter", "a", function() {
$("#menu").addClass("link-hover");
})
.on("mouseleave", "a", function() {
$("#menu").removeClass("link-hover");
});
/*
1. Color the current one if the menu doesn't have the link-hover class
2. Color the current link if being hovered
*/
#menu:not(.link-hover) .current, /* 1 */
#menu a:hover { /* 2 */
color: #FFBB3F;
}
<div id="header">
<div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
<nav class="cf" id="menu">
<ul>
<li>ABOUT</li>
<li>GALLERY</li>
<li>BIO</li>
<li>CONTACT</li>
<li>HOME</li>
</ul>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to hide menu with javascript

I found this code on the web and i need help figuring out how to make is so when i click on one of the li elements the menu hides. Thanks.
http://jsfiddle.net/E4Zgj/203/
var originalNavClasses;
function toggleNav() {
var elem = document.getElementById('navigation_list');
var classes = elem.className;
if (originalNavClasses === undefined) {
originalNavClasses = classes;
}
elem.className = /expanded/.test(classes)
? originalNavClasses
: originalNavClasses + ' expanded';
}
<nav id="navigation">
<a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">
☰ MENU
</a>
<ul id="navigation_list" role="navigation">
<li><a href=#>HOME</a>
</li>
<li><a href=#>SERVICES</a>
</li>
<li><a href=#>WORK</a>
</li>
<li><a href=#>CONTACT</a>
</li>
</ul>
</nav>

Try this:
var nav = document.getElementById('navigation_list');
function toggleNav(e) {
nav.classList.toggle('expanded');
e.preventDefault();
}
document
.getElementById('navigation')
.getElementsByClassName('menu_button')[0]
.onclick = toggleNav;
nav.onclick = toggleNav;
Note I have removed the inline event listener in your html, and attached it using JS instead.
Demo

Your fiddle is using MooTools, not sure if that is the library you're using or not but this is what you need to do in jQuery. I don't know MooTools:
$(function() {
$('#navigation_list a').on('click', function(e) {
e.preventDefault();
toggleNav();
});
});