jQuery selecting the top li of a menu - javascript

Sorry for the noobish question.
I've got a menu similar to this:
<div id="navigation">
<ul>
<li>menu item</li>
<li>menu item
<ul>
<li>sub menu item</li>
<li>sub menu item
<ul>
<li>sub sub menu item</li>
<li>sub sub menu item</li>
<li>sub sub menu item</li>
</ul>
</li>
<li>sub menu item</li>
<li>sub menu item</li>
</ul>
</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
I'm trying to change the class for the selected page. I'm part way there with this:
$(function(){
var path = location.pathname.substring(1);
if ( path ){
$('#navigation a[href$="' + path + '"]').parent().attr('class', 'selected');
}
});
Which changes the class on the parent li. Cool. But what I really want to do is change the class on top level li. In other words if a "sub sub menu item" is selected goes all the way up the tree and changes the very first li that contains that link.
Would appreciate any help at all.
Thanks,
Andy.

You can use .parents() and :last (since they're returned in the order found...top parent is last) when looking for the <li>, like this:
$('#navigation a[href$="' + path + '"]').parents('li:last').addClass('selected');
Also .addClass() is probably what you're after here :)

$('#navigation>ul>li:has(a[href$="' + path + '"])')

use >
$('#navigation > ul > li > a[href$="' + path + '"]')

Related

Slide Toggle on link click, but keep link clickable to page

I have a "dot" navigation on a site that has one link with a submenu. Originally, I had a simple JQ function that would slideToggle() the submenu on hover but that was causing some 'bouncing' issues. So, I reverted it back to click() function.
$("#troy-dot-nav li.menu-item-81 > a").click(function(e){
e.preventDefault();
$(this).siblings('.sub-menu').slideToggle('800');
});
In doing so, I need to add the preventDefault() so the submenu would open up on click, but disable the link.
Turns out, I need to keep the link on that active to navigate to that top-level page, but can't seem to figure out the best way to go about allowing the submenu to open (on click or hover; without bouncing) and keep the menu link active.
HTML for Menu
<div class="menu-primary-container">
<ul id="troy-dot-nav" class="menu reverse-dots">
<li class="...">About</li>
<li class="... menu-item-81">
Integrated Services
<ul class="sub-menu" style="display: none;">
<li class="...">EPC & Project Services</li>
<li class="...">Pipeline Construction</li>
<li class="...">Facility Construction</li>
<li class="...">Integrity Management</li>
</ul>
</li>
<li class="...">Safety & Quality</li>
<li class="...">Careers</li>
<li class="...">Contact Us</li>
</ul>
</div>
The CSS creates the dots on the li:after. Removed extra HTML for cleaner look here.
can't you just use css to add/remove an active class and also close all / open related submenu ?
Like so :
$(document).ready(function() {
$('.link').click(function() {
// Remove the "active" class from all links
$('.link').removeClass('active');
// Add the "active" class to the clicked link
$(this).addClass('active');
// Find the corresponding sublist
var sublistId = $(this).data('sublist');
var sublist = $('#' + sublistId);
// Close all sublists
$('.sublist').hide();
// Open the corresponding sublist
sublist.show();
});
});
with that kind of html :
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<ul id="sublist-1" class="sublist">
<li>Sublist item 1</li>
<li>Sublist item 2</li>
</ul>
<ul id="sublist-2" class="sublist">
<li>Sublist item 3</li>
<li>Sublist item 4</li>
</ul>
<ul id="sublist-3" class="sublist">
<li>Sublist item 5</li>
<li>Sublist item 6</li>
</ul>

How to add .current class to parent li using jquery

I was wondering if someone can help me. I trying to add .current class to the active parent in my navigation.
Here is my navigation:
<ul id="top-nav">
<li>Home</li>
<li>About
<ul id="about-dropdown" class="dropdown">
<li>Sub Cat</li>
<li>Sub Cat 1</li>
<li>Sub Cat 2</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
I have managed to get the .current class to display on the current page but when the user is on a sub page, eg. "Sub Cat 1" I want the "About" a tag to add the .current page.
Here is my Jquery:
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('#top-nav a').each(function(){
// and test its normalized href against the url pathname regexp
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('current');
}
$(document).ready(function(){
$("li.current").parent().addClass("current");
});
$(document).ready(function(){
$("ul.current").parent().addClass("current-parent");
});
If anyone can help it would be appreciated :-)
Thanks
<ul id="top-nav">
<li>Home</li>
<li>About
<ul id="about-dropdown" class="dropdown">
<li>Sub Cat</li>
<li>Sub Cat 1</li>
<li>Sub Cat 2</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
JavaScript
$('#top-nav li a').hover(function(){
$(this).addClass('current');
}).mouseleave(function(){
$(this).removeClass('current');
});
$('#about-dropdown').hover(function(){
$(this).prev().addClass('current');
}).mouseleave(function(){
$(this).prev().removeClass('current');
});
CSS
.current{
background: #F00;
}
Fiddle
http://jsfiddle.net/7LzLk8aw/
I think what you want is the parents() function:
$(document).ready(function(){
$("li.current").parents('#top-nav > li').addClass("current");
});
If you only want the top level item use the selector above. If you want all parents use '#top-nav li'

Adding a seperate class to list items parent using jquery?

I have a list with different levels of depth:
<ul id="top-level" class="top-level">
<li>Item 1</li>
<li>Item 2
<ul class="sub-menu">
<li>Sub item 1</li>
<li>Sub item 2</li>
<li>Sub item 3
<ul class="sub-menu">
<li>Subsub item 1</li>
<li>Subsub item 2</li>
</ul>
</li>
<li>Sub item 4</li>
</ul>
</li>
<li>Item 3</li>
</ul>
I am using the following jquery script to add a class to the parents:
$("ul li ul").parent().addClass("menuparent");
Is there a way to add this class only to the top level parent li's and a different class for all other (deeper) parent li's?
Just use the > selector from your top level ul.
Based on your current selector:
$("ul.top-level > li > ul").parent().addClass("menuparent");
Or for li only:
$("ul.top-level > li").parent().addClass("menuparent");
For top level lis
$("#top-level > li").addClass("menuparent");
and for lower level li
$("#top-level li li").addClass("someotherclass");
If I understand correctly, people are not giving you answers for locating the deeper parent li's, here's my take:
$("ul.top-level > li > ul").find('li > ul').parent().addClass("deeper-parent-li");

jQuery and selecting the next list items objects

I have a nav built with a list and sub nav as lists inside a parent list. The sub nav resides in the next list item to it's corresponding main nav link:
This sits in a div with an id of 'nav'
<ul>
<li>Nav main 1</li>
<li>
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>Nav main 2</li>
<li>
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
</ul>
Currently I have the following jquery:
$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){
if ($(this).next().is(':visible')) {
$(this).next().hide();
} else {
$("#nav ul li a[href^='#']").each(function(){
$(this).next().hide();
});
$(this).next().show();
}
});
I thought this would work to make all the sub menu's hide and then show the one that had been clicked on. For some reason nothing happens. I have checked the console (firebug) and there is no error shown.
Getting frustrated with it now! :-/
EDIT: Here is the answer:
$(document).ready(function() {
$("#nav ul li a[href^='#']").each(function(){
$(this).parent().next().hide();
$(this).click(function() {
if ($(this).parent().next().is(':visible')) {
$(this).parent().next().hide();
} else {
$("#nav ul li a[href^='#']").each(function(){
$(this).parent().next().hide();
});
//then reshow and label the clicked nav
$(this).parent().next().show();
}
});
});
});
HTML:
<div id="nav">
<ul>
<li>
Nav main 1
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>
Nav main 2
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
</ul>
</div>
JavaScript:
var s = $('#nav ul ul').hide();
$('#nav a').click(function() {
var u = $(this).next();
u.is(':visible') ? u.hide() : ( s.hide(), u.show() );
return false;
});
Live demo: http://jsfiddle.net/Tq6LM/1/
Never mind... I have figured it out. Writing it out again must have helped. I needed to call the .parent()
Seems that i was trying to call the next a href, i needed to call the next list!
DEMO: http://so.devilmaycode.it/jquery-and-selecting-the-next-list-items-objects
your Javascript Code should be:
$(function() {
$('#main-nav li').click(function(e) {
e.preventDefault();
$('#main-nav li ul').slideUp(500);
$(this).find('ul:not(:visible)').slideDown(500);
});
});
little bit of CSS
#main-nav li ul { display:none }
your HTML should look like this:
<ul id="main-nav">
<li>Nav main 1
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>Nav main 2
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
</ul>

sub nav not directing to page (jquery)

I have basic markup for a drop down nav, nested lists.
The user will click on the top nav item, which will open up the sub nav, but my sub nav links aren't working.
It is in a CMS so I must have the links for the placeholder pages there.
Markup:
<ul class="navtop">
<li>Who
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Long Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>What
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Long Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
Javascript:
$(".navtop li").click(function(){
$(this).toggleClass("show");
$(this).siblings(".show").toggleClass("show");
return false;
});
css:
#headernav .navtop li.show ul
{
display: block;
}
I tried adding a 'return true' for $(".navtop li ul li a") but it didn't work.
Suggestions?
Why are you return false to the LI click? I believe that's the problem.
If you take that out, everything should work fine.
If that doesn't work, bear in mind you're attaching the click event to every LI instead of just the top level LIs. Try this instead:
$(".navtop > li").click(function(){
$(this).toggleClass("show");
$(this).siblings(".show").toggleClass("show");
});
Turns out this worked:
$(".navtop > li > a").click(function(){
$(this).parent('li').toggleClass("show");
$(this).parent('li').siblings(".show").toggleClass("show");
return false;
});

Categories

Resources