We Keep Coding

Removing active class on click issue

I have some filters on a project I'm working on that once clicked, it's given a class of active, which will then show a div inside the clicked list item called info-pane.
The filters are the 6 blue boxes. I am using the jQuery below to add and remove the active class, however the issue comes when I want to try and remove the active class by clicking the list item that has the active class state but it doesn't seem to work.
The code I'm trying;
$(".filters > ul > li").click(function() {
$(".filters > ul > li").removeClass("active");
$(this).toggleClass("active");
});
$(".filters > ul > li.active").click(function() {
$(this).removeClass("active");
});
Here's a link to the live project; http://client.n8geeks.com/

Try this:
$(".filters > ul > li").click(function() {
$(".filters > ul > li").not($(this).toggleClass("active")).removeClass("active");
});

First you don't need to make two events for that click. Here is example to do in one. But i can't see where your problem is. In your live project i can see that filters change after you click..?
$(".filters > ul > li").click(function() {
$(".filters").find('li').removeClass('active');
$(this).addClass("active");
});
Edit:
I don't know if i understood correctly, but i can see when you click on 'x' nothing happens.. so function that reset your filters.
(non-tested)
$(".close").click(function(){
$(this).closest('ul > li').find('input[type="checkbox"]').each(function( index ) {
$(this).prop('checked', false);
});
});

Jquery selector - affecting element inside same DOM element

My CMS generates menus as lists without any id's and classes. For submenus, there are nested lists.
I made jquery script for expanding submenus:
$(function () {
$(".wrapper ul li").click(function () {
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
});
});
My problem is that this script reacts to clicking whole li area and I want it to react to clicking link inside li. Of course I just have to add "a" to selector making it ".wrapper ul li a" but what about condition checking if there is ul nested inside li? And slidetoggle selector. How should I change these?

This might work with minimal modification to your original code.
$(function () {
$(".wrapper ul li a").click(function ()
{
this = $(this).parent();
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
}
);
});
Test and see if it works. I have not tested it. Cheers

Mouseleave triggering when leaving grandparent div

I'm having a bit of trouble with a dropdown menu that triggers fadeOut as soon as the mouse leaves the grandparent div, I've searched this problem to death and have yet to find an elegant solution. Here is my code : link
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function(){
$('ul li ul').fadeOut('400');
});
}
$(document).ready(main);

DEMO: MY FIDDLE
You need to specify what element(s) you are trying to attach the event to. By adding '>' youre forcing to only attach the event to that element's children. Try this:
var main = function() {
$('nav').mouseenter(function() {
$(this).find('ul').fadeIn('400');
});
$('nav>ul>li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};

FIDDLE
$(this).find('ul').fadeOut('400');
is correct as $('ul>li>ul').fadeOut('400'); Could not target specific (current) li.
Use following hierarchical flow of TAGS
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};

Hilighting parent item while hovering child item

I have menu with 2 submenus. Using jQuery I want to higlight hovered item. I can't solve how to higlight parent item, when cursor is on the child item. For hovering I used class caled active:
.vertical-active {
background:#0F6;
}
Jquery function looks like this:
$(document).ready(function (e) {
$('.submenu a').hover(
function () {
$(this).addClass('vertical-active');
$(this).parent('vertical-links a').addClass('vertical-active');
},
function () {
$(this).removeClass('vertical-active');
$(this).parent('vertical-links a').removeClass('vertical-active');
});
});
Problem is in parent selector, but I don't know how to select submenu's parent item.
JSFiddle link:http://jsfiddle.net/6g9tZ/4/

$(document).ready(function() {
$('.submenu a').on('mouseenter mouseleave', function() {
$(this).add($(this).closest('ul').closest('li').children('a')).toggleClass('vertical-active');
});
});
FIDDLE
EDIT:
to highlight the parent as well, you'd do
$('.vertical-links > li > a').on('mouseenter mouseleave', function() {
$(this).toggleClass('vertical-active')
});
FIDDLE

Use .siblings in addition to .closest.
FIDDLE
$(document).ready(function (e) {
$(".vertical-links > li > a").on("mouseenter mouseleave", function(){
$(this).toggleClass('vertical-active');
});
$('.submenu a').on("mouseenter mouseleave",function () {
$(this).toggleClass('vertical-active');
$(this).closest("ul").siblings("a").toggleClass('vertical-active');
});
});

Replace the relevant parts of your code with:
$(this).parents('li:eq(1)').find("> a").addClass('vertical-active');
....
$(this).parents('li:eq(1)').find("> a").removeClass('vertical-active');
One problem with your code is that you were looking for a "parent <a>", but there is no such thing; the <a> is a child of your parent. So here we search for a parent <li>, not the immediate, but actually the grandparent, find its direct <a> child and highlight it.
Additionally you had parent('vertical-links') which should be parent('.vertical-links') (not the dot: its a class not an element).

change active li when clicking a link jquery

I want to make a menu, and change the class when clicking.
When i click on the "li" with no class="active", i want jquery to add a class on the empty <li> and remove it from the othes "li".
<li class="active">data</li>
<li>data 2</li>
can somebody help me ? :)

I think you mean this:
$('li > a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});

// When we click on the LI
$("li").click(function(){
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
$(this).addClass("active");
}
});

$('li').click(function()
{
$('li', $(this).parent()).removeClass('active');
$(this).addClass('active');
}

$(window).load(function(){
page=window.location.pathname.split("/").pop();
menuChildren = $('a[href="' + page + '"]');
$(menuChildren).parent('li').addClass('active');
});
The above code will look up the url and pop out the last element (Which is the file name). Then it finds the anchor tag with href attribute which has the same value of the url then it puts an active class for its parent li tag

This should get you close.
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});