Unable to remove class after using toggle class with jQuery - javascript

I have three navigations in one page and I'm trying to show the active links for each nav. For some reason the third nav isn't working correctly. For example, if you click on "chapter 2" or "chapter 3" or "chapter 4", "chapter 1" stays active. I don't know if it's because "Chapter 1" and "sublink4" from the middle nav have the same url. I tried removing the active class of the third nav, but it's not working. Unfortunately the snipping isn't working as it is on my computer. I only used target="_blank" on the snippet, not only my local machine since you can't click on links on the snippet without restarting the snippet.Thanks
$(window).on('load', function () {
$('body').setActiveMenuItem();
$('body').setActiveMenuItem2();
$('body').setActiveMenuItem3();
});
$(document).ready(function () {
//first nav
$.fn.setActiveMenuItem2 = function () {
$.each($('.nav1').find('li'), function () {
$(this).toggleClass('active',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
}
//middle nav
$.fn.setActiveMenuItem3 = function () {
$.each($('.nav3').find('li'), function () {
$(this).toggleClass('active3',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
}
//third nav
$.fn.setActiveMenuItem = function () {
$.each($('.nav2').find('li'), function () {
$(this).removeClass('active2');
$(this).toggleClass('active2',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
}
});
li.active {
background-color: red;
}
li.active2 {
background-color: blue;
}
li.active {
background-color: yellow;
}
.nav1 ul, .nav3 ul {
display: flex;
justify-content: space-between;
}
nav {
margin-bottom: 50px;
}
.wrapper {
width: 400px;
margin: auto;
}
li {
list-style: none;
background-color: aliceblue;
padding: 10px;
}
li a {
padding: 10px;
}
li a:hover {
color: red;
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<nav class="nav1">
<ul>
<li> Link 1 </li>
<li><a href="/link-2" target="_blank" >Link 2</a> </li>
<li>Link 3 </li>
<li>Link 4 </li>
</ul>
</nav>
<nav class="nav3">
<ul>
<li>Subink 1</li>
<li>Subink 2</li>
<li>Subink 3</li>
</ul>
</nav>
<nav class="nav2">
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</nav>
</div>


-> replace $ to j Query
->Either replace a latest jquery


Use preventDefault to let default event handler to open new link.
window.open() will let you open links in new tabs.
Note: This code won't work in sand-boxes.
Let me know if I'm missing something?
var links = document.querySelectorAll('a');
links.forEach((node) => {
node.addEventListener("click", (evt) => {
evt.stopPropagation();
evt.preventDefault();
evt.target.classList.add('active');
window.open(evt.target.href);
});
});
li.active {
background-color: red;
}
li.active2 {
background-color: blue;
}
li.active {
background-color: yellow;
}
.nav1 ul,
.nav3 ul {
display: flex;
justify-content: space-between;
}
nav {
margin-bottom: 50px;
}
.wrapper {
width: 400px;
margin: auto;
}
li {
list-style: none;
background-color: aliceblue;
padding: 10px;
}
li a {
padding: 10px;
}
li a:hover {
color: red;
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<nav class="nav1">
<ul>
<li> Link 1 </li>
<li>Link 2 </li>
<li>Link 3 </li>
<li>Link 4 </li>
</ul>
</nav>
<nav class="nav3">
<ul>
<li>Subink 1</li>
<li>Subink 2</li>
<li>Subink 3</li>
</ul>
</nav>
<nav class="nav2">
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</nav>
</div>

Related

Make ordered list collapsible

I have an ordered list which i want to make collapsible by default and expandable when user click on the link.
https://jsfiddle.net/rkmv3rn3/17/
How can I make it work so that it works properly
With following script it collapses all Parent item then fails to open them properly.
$(window).load(function() {
prepareList();
});
function prepareList() {
$('#expList').find('li:has(ol)')
.click(function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ol').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ol').hide();
//Create the button funtionality
$('#expandList')
.unbind('click')
.click(function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click(function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
});
};
.page-left-bar {
width: 200px;
background-color: #fff;
}
ol {
margin-left: 0px;
padding-left: 20px;
}
.handbook-page ol {
color: #687074;
counter-reset: item;
}
ol {
counter-reset: item;
color: #687074;
}
ol li {
display: block;
padding: 5px 0;
}
ol li a {
text-decoration: none;
color: #687074;
padding-left: 10px;
}
ol li:before {
content: counters(item, ".") " ";
counter-increment: item;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>LIST OL child list alignment</h1>
<div class="page-left-bar">
<ol id='#expList'>
<li>Home</li>
<li>News</li>
<li>Contact
<ol>
<li>Sub menu</li>
<li>Sub menu long name</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
<li>About
<ol>
<li>Mission</li>
<li>Vision</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ol>
</li>
</ol>
</div>

If you want to toggle the visibility of your submenus. First remove the # from the id #expList in your HTML as #MoshFeu said.
<ol id='expList'>
Then you can simply do it like this.
$(document).ready(function(){
$("#expList").find("ol").hide();
$("#expList > li").click(function(){
$(this).find("ol").slideToggle();
});
});
See this fiddle

Create an Accordion Menu for Mobile Site Jquery and CSS

I have recently started designing a mobile website using media queries and browsing a few websites to see what they've done it seems accordion navigation menus are the way to go, scaling up to a normal horizontal navigation bar. I have browsed and browsed the internet looking for an accordion walkthrough but I can not seem to find one that explains it well enough.
A good example is the one from microsoft on their website. Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
padding: 20px 0px 20px 0px;
border-top: 2px solid #abc;
}
nav ul ul {
height: 0;
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</html>
These navigation bars have submenus [nav ul ul] that slide out when nav ul li is clicked. I was hoping somebody could point me in the right direction as to how I go about making a slide down sub menu on click, or help me with the code.
I thought there may have been a basic one people could start using and edit to customise themselves.
Thanks for any help.

There is no need for Javascript - you may use a Checkbox instead.
Check out: http://codepen.io/TimPietrusky/pen/CLIsl
If you still want to do it with Javascript go for something like this:
// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
// prevent Click from redirecting
e.preventDefault();
// get the next ul after the li a clicked
if ($(this).hasClass('visible')) {
$(this).next('ul').slideUp(200).removeClass("visible");
} $(this).next('ul').slideDown(200).addClass("visible");
});
CSS animation for height form 0 to auto wont work. See: How can I transition height: 0; to height: auto; using CSS?

Check this out
https://jsfiddle.net/nqamazgz/3/
Unfortunately CSS does not have any click events, instead you will need to use JavaScript and/or jQuery. I used jQuery
All i did was add a class hide-nav to your nav with display none. And a button to click of course.
And a bit of jQuery
$(document).ready(function() {
$('#topMenu-btn').on('click', function() {
$('nav').slideToggle();
});
});

Try something like this:
http://jsfiddle.net/kb668aag/
You'll need to modify the code a bit.
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
CSS
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
padding: 20px 40px;
display: block;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
border-top: 2px solid #abc;
}
nav ul ul {
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
ul.sub-menu{
display: none;
}
.has_children > a{
color: #ddd;
}
JS:
var $menu_with_children = $('.has_children > a');
$menu_with_children.on('click', function(e){
e.preventDefault();
var $this = $(this);
if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
$this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
} else{
$this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
}
});

Using li:hover is not showing div when the list item is an anchor

I'm having an issue with my drop down menu. I am trying to have the end result look similar to BestBuy.com's navigation. The code is below along with more explanation at the end.
<div class="navbar">
<ul>
<li>Products
<div class="secondlevel">
<ul>
<li>Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</div>
</li>
<li>Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Test Link</li>
</div>
and my CSS:
body {
font-family:sans-serif;
background: #eee;
}
.navbar {
background:lightblue;
width: 100%;
padding:0;
}
.navbar ul {
list-style:none;
padding:0;
margin:0;
}
.navbar ul>li {
display:inline-block;
}
.navbar ul li ul>li {
display:block;
}
.secondlevel {
position:absolute;
width:350px;
height:477px;
background:#fff;
padding:0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position:absolute;
width:350px;
height:477px;
background:lightgreen;
left:350px;
border: 1px solid #c3c4c4;
top:-1px;
}
.thirdlevel.two-columns {
width:700px;
}
.thirdlevel div:first-child {
position:absolute;
left:0;
}
.thirdlevel div {
position:absolute;
right:0;
}
.column {
width:350px;
}
.thirdlevel {
display:none;
}
.secondlevel {
display:none;
}
.navbar li:hover > div:first-child {
display:block;
}
.active {
display:block;
}
The problem I'm having is that when I try to turn the list items into links with: <li><a>Products</a><li>
When I do that, hovering over the element no longer works.
Also, the hover effect doesn't work in IE either. I'm guessing that's because I'm using li:hover.
I was attempting to use jQuery for the hover effect, and I would really like to since I've read that it's better for what I need to do, but my knowledge is limited in that department.
From what I researched I could use something like this:
$(document).ready(function () {
$(".main-nav-item").hover(function () {
$(".secondary-menu").toggleClass("active");
$(".tertiary-menu").toggleClass("hide");
});
});
Of course those classes don't line up with what I have, but that's the gist of what it is. The problem I had with that was I couldn't get it to work on only one child. Hopefully that's the right word. For example: When I hovered over my first <li> it would open all of the submenus. The way it is right now is perfect, except for the fact that nothing can be a link, which is kind of important.
Let me know if you need anymore information.

Try Making the links in the <li><a>Link</a></li> in to block Elements
a { display:block; }
did the trick for me
EDIT (Went Through you Problem)
Does this what you are asking for ..
$(document).ready(function() {
$(".main-nav-item a").hover(function() {
$(".secondlevel").addClass("active");
$(".thirdlevel").addClass("hide");
});
$(".secondlevel").hover(function() {
$(".thirdlevel").addClass("active");
});
});
body {
font-family: sans-serif;
background: #eee;
}
.navbar {
background: #FFE;
width: 100%;
padding: 0;
}
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
}
.navbar ul>li {
display: inline-block;
}
.navbar ul li ul>li {
display: block;
}
.secondlevel {
position: absolute;
width: 350px;
height: 477px;
background: #fff;
padding: 0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position: absolute;
width: 350px;
height: 477px;
background: #AABC34;
left: 350px;
border: 1px solid #c3c4c4;
top: -1px;
}
.thirdlevel.two-columns {
width: 700px;
}
.thirdlevel div:first-child {
position: absolute;
left: 0;
}
.thirdlevel div {
position: absolute;
right: 0;
}
.column {
width: 350px;
}
.thirdlevel {
display: none;
}
.secondlevel {
display: none;
}
.navbar li:hover > div:first-child {
display: block;
}
.active {
display: block;
}
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul>
<li class="main-nav-item">
Products
<div class="secondlevel">
<ul>
<li>
Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</div>
</li>
<li>Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</li>
<li>Test Link
</li>
</ul>
</div>

Have your tried <li>EXAMPLE</li>? As for the IE side of things, I would recommend using IE specific styling or if you haven't already, used CSS Reset, for a start. Do you have a working example?

Accordion with multiple links

I'm taking this CSS-Tricks article and converting it to a UL > LI instead of a DT > DD approach. I just want the pink box to reveal the sub-links when clicked.
For some reason though I cannot get it working. I've created a jsFiddle of it here (click the pink box):
//Accordion
(function($) {
var allPanels = $('ul.sub-level').hide();
$('.click-me').click(function() {
allPanels.slideUp();
alert('slide up');
// Problem line
$(this).parent().next().slideDown();
return false;
});
})(jQuery);
ul { list-style: none; padding:0; margin:0; width: 400px; }
ul li { position:relative; background: #fafafa; margin-bottom:3px; height:20px; }
ul li > ul { margin-left: 30px; background: #e3e3e3; }
.click-me { display:block; width: 20px; height: 20px; position: absolute; top:0; right:0; background: #e4f; cursor: pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Link somewhere</li>
<li>Link somewhere</li>
<li class="test">
Link somewhere
<!-- I want to reveal accordion using this span tag -->
<span class="click-me"></span>
<!-- /end -->
<ul class="sub-level">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
<li>Link somewhere</li>
</li>
</ul>
http://jsfiddle.net/ndczc728/1/
The problem line is this (I think):
// Problem line
$(this).parent().next().slideDown();
Anyone?

You don't need to use parent. Also you have to remove fixed height from li elements:
//Accordion
(function($) {
var allPanels = $('ul.sub-level').hide();
$('.click-me').click(function() {
allPanels.slideUp();
// Problem line
$(this).next().slideDown();
return false;
});
})(jQuery);
ul {
list-style: none;
padding: 0;
margin: 0;
width: 400px;
}
ul li {
position: relative;
background: #fafafa;
margin-bottom: 3px;
}
ul li > ul {
margin-left: 30px;
background: #e3e3e3;
}
.click-me {
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
background: #e4f;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Link somewhere
</li>
<li>Link somewhere
</li>
<li class="test">
Link somewhere
<!-- I want to reveal accordion using this span tag -->
<span class="click-me"></span>
<!-- /end -->
<ul class="sub-level">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
<li>Link somewhere
</li>
</li>
</ul>

how to hide dropdown menu if i click body any element?

How to close my DropDown menu if i click body element of outside dropdown menu .
Please give me suggestion .
My code is
$(document).ready(function(){
$(document).on('click', '.top-nav-head>li>a', function(){
$(this).siblings('ul').toggle().closest('.top-nav-head>li').siblings('li').find('ul').hide();
});
});
.top-nav-head{
list-style-type: none;
padding: 0;
margin: 0;
background:blue;
float: left;}
.top-nav-head>li{
float: left;
position: relative;
}
.top-nav-head>li > a{
color: #000;
padding: 0 10px;
display: block;
line-height: 40px;
font-size: 14px;
}
.top-nav-head>li > ul{
position: absolute;
display: none;
top: 100%;
left: 0;
min-width: 140px;
right: 0;
list-style-type: none;
padding: 5px 0 5px 0;
margin: 0;
background-color: red;
}
.top-nav-head>li > ul>li{
display: block;
}
.top-nav-head>li > ul>li > a{
display: block;
color:#white;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="top-nav-head">
<li>Home</li>
<li class="active">
Admin Module
<ul>
<li><a ui-sref="av-kw-questions.empty">Questions</a></li>
<li><a ui-sref="av-wbs">WBS Elements</a></li>
<li><a ui-sref="av-lbp">Lookback planning</a></li>
<li>Form</li>
<li>Plan Component</li>
</ul>
</li>
<li>
Project Management
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</li>
</ul>

You could attach an event handler to the document that will hide your drop down menus.
You would the need to stop the event bubbling when clicking on the menu items themselves:
$(document).ready(function () {
$(document).on('click', function () {
$('.top-nav-head > li > ul').hide();
});
$(document).on('click', '.top-nav-head>li>a', function (e) {
e.stopPropagation();
$(this).siblings('ul').toggle().closest('.top-nav-head>li').siblings('li').find('ul').hide();
});
});
JSFiddle

This will check if you have clicked on the element, just set your selector ("most" parent) and "hide" functionality:
$(document).mouseup(function (e)
{
var your_element = $('#your_element');
if(container.has(e.target).length === 0)
{
//hide your element
}
});

Categories