Develop Reference

add class to parent li when submenu is active

i am having a problem here despite googling for hours.
i have a menu which has submenus.
<div class="themenu">
<ul>
<li>Link 1 //Want to add class catactive here when the following submenu is active
<div class="thesubmenu">
<ul>
<li class="subcat-active">submenu1</li>
</ul>
</div>
</li>
</ul>
</div>
I tried using this query but its not happening.
$(document).ready(function(){
if($('.thesubmenu ul li').hasClass('subcat-active')){
$(this).parent('.themenu ul li').addClass('cat-active');
}
});

There are many ways to write this but there is no need to iterate (.each()) or use .hasClass() which slow down this simple call.
Simply select the li items with .subcat-active, then use closest('li') to find the closest li ancestor and add the class. You need to use .parent() first because closest() includes the starting element which is also a li.
$(document).ready(function(){
$('.thesubmenu ul li.subcat-active').parent().closest('li').addClass('cat-active');
});
http://jsfiddle.net/3ehvqzjh/1/

just do:
$(document).ready(function(){
$('.thesubmenu ul li.subcat-active').each(function(){
$(this).parent().closest('li').addClass('cat-active');
});
});
Demo: http://jsfiddle.net/bpkpn6b5/

Here is a DEMO
$(document).ready(function(){
if ($('.thesubmenu ul li').hasClass('subcat-active')) {
$('.thesubmenu ul li').parents('li:eq(0)').addClass('cat-active');
}
});

$(document).ready(function(){
$('.subcat-active').each(function () {
$(this).parents('li').eq(0).addClass('cat-active');
});
});
Working example

jQuery Updating Class on Parent Item

I have the following layout:
<ul id="header">
<li id="item1" class="off"> <a>Abc</a> </li>
<li id="item2" class="off"> <a>Abc</a> </li>
</ul>
When I click on a href as in the <a> I want the class in the <li> for that to be updated.
I've tried the following with no luck:
$(".header > li a").click(function(){
$(".header li a.current").removeClass("off");
$(this).addClass("on");
});
Any ideas?
--EDIT:
Ok i just realized I'm not looking at this correctly.
So when clicking on that link a new page loads. So using the click function is wrong because a new page loads so whatever changes to the class i have will be lost. What i therefore need is to use the $(document).ready(function() to say something like "I clicked on li with id from the previous page so now update that class"
So
Thanks!

You can use closest() to get the parent li and then add the class:
$(this).closest("li").addClass("on");
you also need to use id selector $("#header") not class selector $(".header"):
$("#header > li a").click(function(){
$("#header li a.current").removeClass("off");
$(this).closest("li").addClass("on");
});
FIDDLE DEMO

USe
$(".header > li a").click(function(){
$(".on").removeClass("on");
$(this).closest("li").addClass("on");
});

Working fiddle http://jsfiddle.net/LDC69/1/
$("#header > li a").click(function(){
$(this).parent().removeClass("off").addClass("on");
});
Its events chaining.
Look li is ID not CLASS.

Demo
Your selector is wrong $(".header") . In your html code <ul id="header"> so you have to use id selector $("#header")
$("#header li a").click(function (e) {
e.preventDefault();
$(this).parent().siblings().removeClass("on").addClass("off"); // Remove all class on and added off class
$(this).parent().removeClass("off").addClass("on"); // Select current parent element and remove off and added on class
});

On Click of Anchor, How to target a LI that does not have any ULs

I have a simple menu that has an arrow within the anchor. I have jQuery that adds a class to show the arrow on click. However I need it to NOT "show the arrow" on click if the clicked li a doesn't have a submenu. Here's a rough example of my menu:
<ul id="menu">
<li>TopLevel_LinkOne <img src="img/down-carat.png" class="down-carat"></li>
<li>TopLevel_LinkTwo <img src="img/down-carat.png" class="down-carat"></li>
<li>TopLevel_LinkThree <img src="img/down-carat.png" class="down-carat">
<ul class="sub-menu">
<li>Submenu Link One <img src="img/down-carat.png" class="down-carat"></li>
<li>Submenu Link Two <img src="img/down-carat.png" class="down-carat"></li>
<li>Submenu Link Three <img src="img/down-carat.png" class="down-carat"></li>
</ul>
</li>
</ul>
In this example I do not want the arrow to show, if "TopLevel_LinkOne" or "TopLevel_LinkTwo" is clicked. I can't remove the arrow image because it's being added automatically by the nav walker in Wordpress.
Here's my jQuery:
$('#menu li a').click(
function() {
$('ul li a').removeClass('show-arrow'); // Remove any previous arrows
if('some jquery here that checks if THIS has submenu') {
$(this).addClass('show-arrow'); // Show the arrow image
}
});

Try this:
if($(this).parent().find('ul').length) {
$(this).addClass('show-arrow'); // Show the arrow image
}

If your HTML allows you to make certain assumptions, you can do this really easily.
For example, if it's a safe assumption that your list items will only ever contain either "just a single <a> element", or "a single <a> element followed by a submenu", then you can just do:
if( this.parentNode.children.length > 1)
But if you want robustness, you could do this:
if( $("ul",this.parentNode).length)

Try,
if($(this).closest('li').find('.sub-menu').length > 0)
Full code:
$('#menu li a').click(function() {
$('ul li a').removeClass('show-arrow'); // Remove any previous arrows
if($(this).closest('li').find('ul.sub-menu').length) {
$(this).addClass('show-arrow'); // Show the arrow image
}
});

try this way
JQUERY CODE:
$('#menu li a').click(function() {
$('ul li a').removeClass('show-arrow'); // Remove any previous arrows
if($(this).siblings('ul').length) {
$(this).addClass('show-arrow'); // Show the arrow image
}
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/MHg67/3/
Happy Coding :)

This one might just work for you:
$('#menu > li').click(function () {
$('ul li a').removeClass('show-arrow');
$(this).has('ul.sub-menu').addClass('show-arrow');
}
You can modify it accordingly to suit your needs. Thanks!

Change class name of anchor tab inside list

I have a small query.
<ul class="navigation">
<li>Home<span class="ui_icon home"></span></li>
<li>About Us<span class="ui_icon aboutus"></span></li>
<li>Services<span class="ui_icon services"></span></li>
<li>Gallery<span class="ui_icon gallery"></span></li>
<li>Contact Us<span class="ui_icon contactus"></span></li>
</ul>
this code I got from internet, it's like on click only the page scrolls to the next content.
and the selected list item updates itself. But when I try to implement this template in my Asp.net masterpage, the list items does not get updated. so what can I do?
Any suggestion?
below is the CSS default provided by the template
ul.navigation a:hover, ul.navigation a.selected {
color: #201f1b;
background: url(../images/templatemo_menu_hover.png) no-repeat left;
}

If you want to set the class selected to the clicked anchor and remove it from other anchor, then use:
$('.navigation li a').click(function(e) {
e.preventDefault();
$('.navigation li a').removeClass('selected');
$(this).addClass('selected');
})
Fiddle Demo

If you want to use the 'on click' function to remove and add the class on elements, try the code below:
$(".navigation li a").on("click", function (event) {
//prevents the browser from going to a new URL
event.preventDefault();
//removes selected class from all elements
$('.navigation li a').removeClass('selected');
//adds selected class to element you click
$(this).addClass('selected');
});
I do not have access to your image so I used the background-color parameter in the css
jsfiddle example: http://jsfiddle.net/9Jjud/

Toggle and animate height of a ul within a li

I have a list inside a li which needs to slide into view when the parent li is clicked.
My code works nicely but if i click any li all of the sub lists show where as i want it only to apply to the one that was clicked...
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
<ul id="offering">
<li class="t current"><span>sage solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="m"><span>solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="b"><span>third party additions</span></li>
</ul>

$(this).find("ul").animate({height: "toggle"}, 1000);

Here you are applying the animation to all elements that match the selector #offering ul li, when infact you just need to apply it to the child ul of the li clicked.
Instead of the following
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
Try this
$("#offering li").click(function() {
this.childNodes[0].animate({height:"toggle"},1000);
});
I'm not as familiar with jQuery as I am with Mootools, so there may be a more appropriate way to get the child ul element than using the childNodes array - but you get the idea.