HTML Menu set Parent item class if child item has class - javascript

I have an HTML menu that has .active classes.
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="active">Account Details</li>
<li>Contacts</li>
</ul>
</li>
</ul>
</div>
The active classes are set on the <li> items (parent and sub items)
How can I use javascript to set the active class on the items if the url equals the href of the menu item and also set its parent item with the active class
I tried to do it with this javascript, but it didn't work.
<script>
$(function() {
$('#navbar-collapse li').each(function() {
if(this.href.indexOf(window.location.pathname) === 0) {
$(this).addClass('active');
} else {
// case when something was set to active by the server
$(this).removeClass('active');
}
});
});
</script>

if(document.querySelector('.dropdown .active')
document.querySelector('.dropdown').classList.add('active');
Basically, if any <li> child has class .active, then assign .active to the .dropdown element
Edit: working example

Use this: https://api.jquery.com/closest/
$('li.active').closest('li').addClass('active');

Related

Add css class to dropdown menu on menu item click

I have bootstrap 3 menu. And I want to add class to "dropdown" menu if usre click on "caret" ( parent menu item )
<ul id="menu-testing-menu" class="nav navbar-nav sf-js-enabled" style="touch-action: pan-y;">
<li class="menu-item menu-item-has-children dropdown">
<a class="sf-with-ul" data-toggle="dropdown">Home<span class="caret"></span></a>
<ul class="dropdown-menu" style="display: none;">
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
</ul>
</li>
</ul>
So I try to use js
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).find('.dropdown-menu').toggleClass('dd-menu-show');
});
but it doesn't work. How to solve thise problem?
$(this).find('.dropdown-menu') is not possible when clicking .caret because $(this) is looking inside the current element and it is empty.
You might also want to consider adding the click event to the entire <a>.
Try this
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
var parent = $(this).closest('.dropdown');
parent.find('.dropdown-menu').toggleClass('dd-menu-show');
});
.find() searches for a node inside the selected node. You are selecting the .caret span element, so it's trying to find a .dropdown-menu node inside that, which of course does not exist. You'll want to navigate up the tree to the .dropdown node, and then do your find() call.
$(this).find(".dropdown-menu") will not work because there is no element in the current clicked element with class dropdown-menu.
So just try :
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$('.dropdown-menu').toggleClass('dd-menu-show');
});
You can do it in this way.
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).parent().next('.dropdown-menu').toggleClass('dd-menu-show');
});

change menu class active

I want to change menu class active when click a submenu. But instead what my code does is that set active the default active menu.
$('#menu1').find('li').click(function(){
//removing the previous selected menu state
$('#menu1').find('li').removeClass('active');
//is this element from the second level menu?
if($(this).closest('ul').hasClass('second-level')){
$(this).parents('li').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
So for example
<ul id="menu1" class="nav navbar-nav">
<li class="active" > {{ Lang::get('messages.home') }}</li>
<li class='dropdown '>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{{ Lang::get('messages.vehicles') }}
<b class="caret"></b>
</a>
<ul id = "second-level" class="dropdown-menu">
<li> <a href="form-general.html">{{link_to_action('MaintenanceController#vehicle_maintenance',
Lang::get('messages.vehicle_maintenance'),null)}}</a></li>
</ul>
</li>
when click second level submenu active class is set to home menu (default active meanu) after page refresh. How to set active the menu of submenu?
You can compare the URL in the menu item's link to the current URL on page load:
$(document).ready(function() {
$('#menu1 li').each(function() {
if (location.href.indexOf($('a',this).attr('href'))>=0) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
};
});
});
However, it's probably better to add the class yourself or use server-side code to do so (depending on how your site is generated).

add "active "class to the selected list item through javascript

I have a class name "active" which i want to be added to the selected list item.
Here is how my list style looks like:
<ul class="page-sidebar-menu">
<li class="start active">
<span class="title">Dashboard</span>
</li>
<li >
<span class="title">Pages</span>
<ul class="sub-menu">
<li >
All Page
</li>
<li >
Add Page
</li>
</ul>
</li>
<li>
<span class="title">Posts</span>
<ul class="sub-menu">
<li >
All Posts
</li>
<li >
Add Posts
</li>
</ul>
</li>
</ul>
i want to add class on two places one is "li" under sub-menu and <span class="title">Posts</span>
It should look something like this
I tried something like this but didnt work
$('.page-sidebar-menu ul li a').click(function() {
$('.page-sidebar-menu ul li').removeClass('active');
$(this).addClass('active');
});
Please suggest some solution.
Thank you!
$(".sub-menu li").addClass("active");
$(".title").addClass("active");
To add a class to a the list-element and the title Post element.
If you want to remove a class you can use. '.removeClass([class to be removed])'
function to do so:
$(".sub-menu li").click(function(){
$(".sub-menu li").removeClass('active');//to make sure there will be only one with the class 'active'
$(this).addClass('active');
});
DEMO

jQuery accordion slides up multiple times

I'm making a jquery accordion and I have some issues
My jQuery searches for a ul inside a class and if it has a certain class it slides down, but it slides down as many times as the element ul exists in the whole nav
Here is my jquery code so far:
if($(this).has("ul").length){
$(".menu ul li").on('click',function(e){
$(this).addClass('open').siblings().removeClass('open').children();
$('.menu ul li ul').slideUp();
if($(this).parents().find(".open").length){
$(this).children('ul').slideDown();
}
//$(this).parents().find(".open").children('ul').slideDown();
e.preventDefault();
});
};
this is my html:
<div class="menu">
<a id="jump" href="#"><p>Menu</p><span class="right">▼</span></a>
<nav class="row">
<div class="page_wrapper">
<ul class="niveau_1">
<li class="active">Home</li>
<li>Group
<ul class="sub-menu">
<li>QHSE/Awards</li>
<li>Vacatures/</li>
</ul>
</li>
<li>Nieuws & Media
<ul class="sub-menu">
<li>Van Moer in de media</li>
<li>Nieuwsarchief</li>
</ul>
</li>
<li>Sport & Events
<ul class="sub-menu">
<li>Casual Friday
<ul>
<li>Inschrijving</li>
<li>Foto's</li>
</ul>
</li>
<li>Thursday Lounge</li>
<li>Triatlon</li>
<li>Sponsoring</li>
<li>Beurzen</li>
<li>Kalender</li>
</ul>
</li>
<li>Vestigingen</li>
<li>Contact</li>
</ul>
</div>
just guessing sincei don't have HTML to look too... your problem is here in parents()
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
i think u need parent() here
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
if($(this).parent().find(".open").length){ //try this
$(this).children('ul').slideDown();
}
note: it would be easy if you provide us with your HTML too

active class javascript

I have used the following code to display menu
<ul id="menu">
<li id="11">Start a League<span></span></li>
<li id="12">Roster Settings<span></span></li>
<li id="13">Draft Settings<span></span></li>
<li id="14">Transaction Settings<span></span></li>
<li id="15">Playoff Settings<span></span></li>
<li id="16">Launch Your League!<span></span></li>
</ul>
If I click any menu the class active should be added in that particular li. How can i do it with javascript.
Using jQuery:
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});
I supposed that you only wanted a single <li> with the active class.
Demo: http://jsfiddle.net/j9qTE/1/

Categories

Resources