Develop Reference

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 a class to an element using jQuery and javascript?

I have the HTML code as given below to add the navigation to my site. (Note that the list is nested)
<div id="navigation">
<ul>
<li>Home</li>
<li>About us</li>
<li>Help</li>
<li>DropDown
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li class="last">A Last Link Text</li>
</ul>
</div>
I want to show the currently active page link in new color. So the corresponding list item should have the class active and I use the CSS to change the color. For example, if the default.html is the currently opened page, the code should be <li class=“active”>Home</li>.
How to do that in jQuery and JavaScript (I need both for two different websites).
Can anyone help me?
Thanks for your help.

Get your URL / Parse it:
var pathname = window.location.pathname;
Then add the class:
Jquery:
$(element).addClass('classname');
JS: How do I add a class to a given element?

Try this
$(document).ready(function () {
var url = location.href;
$('#navigation li a').each(function () {
var thisHref = this.getAttribute('href');
if (thisHref !== '#' && url.indexOf(thisHref) !== -1) {
$(this.parentNode).addClass('active');
return;
}
});
});

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

jQuery selecting the top li of a menu

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 + '"]')

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;
});