We Keep Coding

How to identify an HTML element's selector using Javascript?

I am building a nav bar, where if you hover over an a item in the nav bar, it will add a class named nav-hover that adds certain styling to a when hovered.
Let me know if there is a better way to implement this, but in each li, I have added it's unique selector inside navIn()````. Which method can I use that would automatically extract the selector. Usingthis``` didn't work.
function navIn(obj) {
document.querySelector(obj).classList.add('nav-hover');
}
function navOut(obj) {
document.querySelector(obj).classList.remove('nav-hover');
}
<div class="navbar" id="navbar">
<div class="container" id="nav-position">
<ul class="nav">
<li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(1)')"><a data-scroll href="#about">About</a></li>
<li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(2)')"><a data-scroll href="#work">My Work</a></li>
<li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(3)')"><a data-scroll href="#">Resume</a></li>
<li onmouseover="navIn('#nav-position > ul > li:nth-child(1)')" onmouseout="navOut('#nav-position > ul > li:nth-child(4)')"><a data-scroll href="#contact">Contact</a></li>
</ul>
</div>
</div>

You can use the :hover pseudo-class to achieve the same hover effect:
EDIT: You can achieve the underline effect with just CSS. You can create the underline using pseudo-elements and apply transition effects onto it as shown below:
* {
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
ul {
list-style: none;
display: flex;
align-items: center;
justify-content: space-around;
height: 70px;
background: rgba(0, 0, 0, 0.25);
}
/* Set the position on your <a> tag so the pseudo-element will position relative to it. */
.nav-link {
position: relative;
}
/* Create the underline element for each <a> tag */
.nav-link::before {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 2px;
background: blue;
transform: scaleX(0);
transform-origin: right;
transition: transform 300ms ease;
}
/* Apply the :hover pseudo-class on the pseudo-elements */
.nav-link:hover::before {
transform: scaleX(1);
transform-origin: left;
}
<nav>
<ul class="nav">
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">My Work</a></li>
<li><a class="nav-link" href="#">Resume</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>

toggleClass triggering twice when resizing browser window

I'm currently in the middle of creating a responsive navigation. I've managed to finish and trying to fix an issue. Whenever I tried resizing the browser, it seems the toggleClass seems to be triggering multiple times. If refresh the browser it works OK, but after resizing it seems to trigger a couple of times in one click.
Here is the code that I have been working on.
JSFiddle - https://jsfiddle.net/kvpyzbxr/1/
<header>
<ul class="navigation secondary-navigation">
<li>
Schools
</li>
<li>
Faculty
</li>
<li>
Research
</li>
<li>
Contact Us
</li>
</ul>
<ul class="navigation primary-navigation">
<li>
Programs
<ul>
<li>Degree Programs</li>
<li>Master in Business Administration</li>
<li>Executive Master in Business Administration</li>
<li>Master in Entrepreneurship</li>
<li>Master of Science and Innovation and Business</li>
<li>Master in Development Management</li>
</ul>
</li>
<li>
Admissions
<ul>
<li>How to Apply</li>
<li>Application Form</li>
<li>Scholarship and Financial Aid</li>
</ul>
</li>
<li>
About Us
<ul>
<li>Why AIM</li>
<li>Leadership</li>
<li>Network and Alliances</li>
<li>Our Brand Story</li>
</ul>
</li>
<li>
News
</li>
<li>
Alumni
<ul>
<li>AIM Leader Magazine</li>
<li>My AIM Connect</li>
<li>Triple A Awardees</li>
</ul>
</li>
<li>
Give
<ul>
<li>Make A Gift</li>
</ul>
</li>
</ul>
</header>
<script>
$(document).ready(function() {
function detectMobile() {
if ($(window).width() < 1080) {
$('header').addClass('mobile');
$('.secondary-navigation').insertAfter('.primary-navigation');
}
else {
$('header').removeClass('mobile');
$('.secondary-navigation').insertBefore('.primary-navigation');
}
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
}
detectMobile();
$(window).resize(function() {
detectMobile();
})
})
</script>
header {
max-width: 1336px;
margin: 0 auto;
}
header .navigation {
padding: 10px 0;
clear: both;
}
header .navigation li {
padding: 10px;
display: inline-block;
position: relative;
font-family: 'Arial', sans-serif;
background-color: #272041;
color: #fff;
float: left;
}
header .navigation li a {
color: #fff;
}
header .navigation li ul {
position: absolute;
top: 0;
left: 0;
padding-top: 30px;
display: none;
}
header .navigation li ul li {
background-color: #231d39;
color: #95939e;
}
header .navigation li:hover ul {
display: block;
}
header.mobile .navigation li {
display: block;
float: none;
}
header.mobile .navigation li ul {
position: static;
display: none;
height: 0;
}
header.mobile .navigation li.expand-menu ul {
height: initial;
display: block;
}

That's because you add the click-event several times. Every time detectMobile() is called you bind a click event to $('.navigation li'). So just move
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
outside of your detectMobile() function.

Jquery: On Click show submenu and hide any other one that's open

I'm building a classic responsive menu with menus and submenus, i'm pretty new to Jquery so i'm having trouble figuring out how to hide a previous submenu when another one needs to be shown.
Here's the Pencode
This is the HTML:
<nav class="products">
<ul>
<li class="brown link-menu">wine essentials
<div class="sub-menu">
<div class="content-sub-menu">
<ul class="sub-menu-list">
<li class="link-subcat">standard</li>
<li class="link-subcat">premium</li>
<li class="link-subcat">super premium</li>
<li class="link-subcat">ultra premium</li>
</ul>
</div>
</div>
</li>
<li class="pink link-menu">wine selective & prestige
<div class="sub-menu">
<div class="content-sub-menu">
<ul class="sub-menu-list">
<li class="link-subcat">standard</li>
<li class="link-subcat">premium</li>
<li class="link-subcat">super premium</li>
<li class="link-subcat">ultra premium</li>
</ul>
</div>
</div>
</li>
<li class="green link-menu">master distillers
<div class="sub-menu">
<div class="content-sub-menu">
<ul class="sub-menu-list">
<li class="link-subcat">standard</li>
<li class="link-subcat">premium</li>
<li class="link-subcat">super premium</li>
<li class="link-subcat">ultra premium</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
This is the SCSS:
nav.products {
ul {
li.brown {
border-left: 10px solid #a09484;
}
li.pink {
border-left: 10px solid #9d7b8c;
}
li.green {
border-left: 10px solid #558d80;
}
li {
border-bottom: none;
padding: 1em 0;
margin-bottom: .2em;
a {} .sub-menu {
height: 0;
overflow: hidden;
.content-sub-menu {
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
ul.sub-menu-list {
padding-left: 1em;
li {
font-size: 1em;
margin-bottom: 0;
a {}
}
}
}
}
&.current {
.content-sub-menu {
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
/*DROPDOWNS*/
.sub-menu {
height: 100%;
}
/*DROPDOWNS END*/
}
}
}
}
nav.products ul li.current .sub-menu {
height: 100%;
}
And i'm using this script to show the submenus:
$('.products ul li').click(function(e) {
$(this).toggleClass('current');
});

$('.products ul li').click(function(e) {
$('.current').removeClass('.current');
$(this).addClass('current');
});
try the above. This way it will find any current class in the page. remove it and add the class to the current element.

It's very easy, just remove the 'current' class from all menu items first, then do the toggle.
$('.products ul li').click(function(e) {
$('.products ul li').removeClass('current');
$(this).toggleClass('current');
});
Here is a working example: http://codepen.io/anon/pen/NRPLRN

Just remove the .current class from li, before toggling the class.
$('.products ul li').click(function(e) {
$('.products ul li.current').removeClass('current');
$(this).toggleClass('current');
});
Updated PEN

In order to hide previously opened sub-menus, you would need to remove their "current" class.
$('.products ul li').click(function(e) {
$('.products ul li').not($(this)).removeClass('current');
$(this).toggleClass('current');
});

Show elements on click instead of on CSS :hover

Currently I use :hover in my CSS to display my nested lists in .wrapper1 elements. I want to make it so that they open on click instead of on hover.
Here is what I've tried so far:
$(function() {
// whenever we hover over a menu item that has a submenu
$('li.parent').on('click', function() {
var $menuItem = $(this),
$submenuWrapper = $('> .wrapper', $menuItem);
// grab the menu item's position relative to its positioned parent
var menuItemPos = $menuItem.position();
// place the submenu in the correct position relevant to the menu item
$submenuWrapper.css({
top: menuItemPos.top,
left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75)
});
});
});
Demo: https://jsfiddle.net/72tnxh45/2/
Below is css which can affect to display all sublinks.
.wrapper1 li:hover > .wrapper1 {
display: block;
}

$(document).ready(function(){
$(".wrapper ul li").click(function(){
//do what ever you want to do with li
});
});

Please have a look attached snippet.
There are made some change in jqyery code and css also.
$(function() {
// whenever we hover over a menu item that has a submenu
$('li.parent').on('click', function() {
if($(this).children(".wrapper").attr('style')=='display: block;'){
$(this).children(".wrapper").css('display','none');
}else{
$(this).children(".wrapper").css('display','block');
}
});
});
.wrapper {
position: relative;
}
ul {
width: 200px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
li {
position: static;
}
li .wrapper {
position: absolute;
z-index: 10;
display: none;
}
li:hover > .wrapper {
//display: block;
}
li:
ul {
margin: 1em;
color: white;
font-family: sans-serif;
font-size: 16px;
}
li {
padding: 1em;
}
li ul {
margin: 0;
}
li .wrapper {
cursor: auto;
}
li .wrapper li {
padding: 0.5em;
}
li:nth-child(2n) {
background: #0E8CE0;
}
li:nth-child(2n+1) {
background: #0064B3;
}
li.parent {
background: #00B99B;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
<li class="parent">Abc >
<div class="wrapper">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>

Custom CSS Navigation dropdown

Currently on my site when I have too many links, the link falls down below the navigation. See my example: https://jsfiddle.net/cn6z13n1/
Is it possible instead to have a More Links list item at the far right which will have a dropdown populated with links?
.toolkit_nav {
background:#dfdfdf;
width:100%;
height:40px;
padding:0;
}
.toolkit_nav ul {
margin:0;
}
.toolkit_nav ul .page_item {
display:inline-block;
line-height:40px;
list-style-type:none;
margin:0px;
padding:0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left:0;
padding-left:0;
}
.page_item:hover, .current_page_item {
background:grey;
}
.page_item a {
color:black;
font-size: 0.9em;
font-weight: 400;
text-decoration:none;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction</li>
<li class="page_item page-item-1039">Digital Landscapes</li>
<li class="page_item page-item-1039">Link 4</li>
<li class="page_item page-item-1039">Link 3</li>
<li class="page_item page-item-1039">Link 2</li>
<li class="page_item page-item-1039">Link 1</li>
<li class="page_item page-item-1039">Link 5</li>
</ul>
</div>
</div>
</nav>

You would need to do this in js i suggest something like this
get the width of the row (max width for nav)
loop through the li elements and sum up there width (+ remember to add the width of a "more" element here
when sum of width > width of nav element hide the elements
add js to your "more" button which shows the hidden elements
Following code is not tested but should give you an idea:
var maxWidth = $('#nav').width();
var moreWidth = $('#more').width(); // li "more" element
var sumWidth = moreWidth;
$('#nav li').each(function() {
sumWidth += $(this).width();
if(sumWidth > maxWidth) {
$(this).addClass('hide'); // add css for hide class
}
});
$('#more').on('click', function() {
$('#nav .hide').fadeIn(100);
// You will need more code here to place it correctly, maybe append the elements in an container
});
Here an example with your fiddle:
https://jsfiddle.net/cn6z13n1/3/
Note: this is just a rough draft, you might to calc paddings etc. to make this work rly good
Edit: updated example with $(window).resize() function
https://jsfiddle.net/cn6z13n1/6/

You'll need to change you HTML slightly but this will work.
.toolkit_nav {
background: #dfdfdf;
width: 100%;
height: 40px;
padding: 0;
}
.toolkit_nav ul {
margin: 0;
}
.toolkit_nav ul .page_item {
display: inline-block;
line-height: 40px;
list-style-type: none;
margin: 0px;
padding: 0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left: 0;
padding-left: 0;
}
.page_item:hover,
.current_page_item {
background: grey;
}
.page_item a {
color: black;
font-size: 0.9em;
font-weight: 400;
text-decoration: none;
}
/* NEW STUFF */
.sub-nav,
.sub-nav li {
box-sizing: border-box;
}
.more {
position: relative;
}
.more>ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0
}
.more:hover>ul {
display: block;
}
.more>ul>li {
display: block;
width: 100%;
clear: both;
text-align: center;
}
.toolkit_nav ul.sub-nav .page_item:first-child {
padding: 0 20px;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction
</li>
<li class="page_item page-item-1039">Digital Landscapes
</li>
<li class="page_item page-item-1039">Link 4
</li>
<li class="page_item page-item-1039">Link 3
</li>
<li class="page_item page-item-1039">Link 2
</li>
<li class="page_item page-item-1039 more">More...
<ul class="sub-nav">
<li class="page_item page-item-1039">Link 1
</li>
<li class="page_item page-item-1039">Link 5
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>