We Keep Coding

jQuery add remove selected class

I need to add active class to my li list and it works perfectly but I don't want to remove active class if someone click already selected li.
Here is my code.
$('.nav li').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
So tried this way but no any luck.
$('.nav li.active').click(function() {
$(this).addClass('active');
});
Any ideas?

You can try with this:
$('.nav li').click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
});
By removing active class from all li items, then adding new active class for current item.

try this. Goodluck
$('.nav').on('click', 'li', function() {
$('.nav li.active').removeClass('active');
$(this).addClass('active');
});

Navigation dropdown toggle - mouseout as well as off hover?

Can someone help me adapt the following so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another of the top level menu buttons is hovered on?
jsfiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
});
});
Still getting my feet wet with jQuery/script coding.
NOTE: I'm using divs as part of the structure of the dropdown, as in the instance that "ul" above is replaced by a div.
FYI, I can't take credit for the above, it is the work of Pramod Sankar L (user PSL).
Any help would be appreciated!

Try
.mouseleave()
:has()
$(document).ready(function () {
$("li:has(ul)").click(function () {
$('li > ul').not($(this).children("ul").toggle()).hide();
}).mouseleave(function () {
$('li > ul').hide();
});
});
$("li:has(ul)") select li which contains ul
Fiddle Demo
Updated After Op's Comment
$(document).ready(function () {
$("#dropmenu li:has(div)").click(function () {
$('#dropmenu li.second-level > #dropmenu li.second-level div.drop_6col-bottom').not($(this).children("#dropmenu li.second-level div.drop_6col-bottom").toggle()).hide();
}).mouseleave(function () {
$(this).children('div').hide();
});
});

Get ID of Clicked list item returning undefined

I have a list
<ul class="submenu">
<li>Profile</li>
<li>Change Password</li>
<li>Payment Settings</li>
</ul>
And would like to get the id of the list item once clicked, how would i do this?
I have tried the below and get undefined?
$(document).ready(function () {
$(this).click(function () {
console.log(this);
});
});

click event should be bound to certain element(s), which could be selected using particular selector:
$('.submenu > li > a').click(function() {
console.log(this.id);
});

$("a").click(function () {
console.log(this.id);
});

Try this:-
$(document).ready(function () {
$(".submenu li a").click(function () {
console.log($(this).attr("id"));
});
});
Working fiddle

How to get the id of element when right clicked

I like to know how to get the id of li when i right click over this li using javascript or jquery.
<ul>
<li id="liid" class="collapsable">
<div class="hitarea collapsable-hitarea">
</div>
<span class="folder">Group1.2</span>
</li>
</ul>
I have the right click function.
$(document).bind("contextmenu", function (e) {
// code to get the id of current li
});
Can any one help me please.

Use .on('contextmenu', 'li')
$(function() {
$('ul').on('contextmenu', 'li', function(e) { //Get li under ul and invoke on contextmenu
e.preventDefault(); //Prevent defaults
alert(this.id); //alert the id
});
});
Demo

This uses event delegation on document and only fires if an li is clicked.
$(document)
.on('contextmenu', 'li', function(e) {
e.preventDefault();
console.log(this.id);
});
Compared to adding a handler on $('ul') or $('li'), this will only bind a single handler.

You can try this
$(function() {
$('li').on("contextmenu", function (e) {
alert(this.id);
e.preventDefault();
});
}
Demo

You can use this..
If you want open also Context Menu on right click then use below code:
$(function() {
$('ul li').on('contextmenu', function() {
alert(this.id);
});
});
and without Context Menu then use below code:
$(function() {
$('ul li').on('contextmenu', function(e) {
e.preventDefault();
alert(this.id);
});
});
Happy New year...

returning clicked li class in an ul javascript/jquery

My code (the html page):
<nav>
<ul>
<li id="homeLink">Home</li>
<li id="rekenLink">Rekenmachine</li>
<li id="bakkerLink">Parkeergarage</li>
<li id="garageLink">Bij de bakker</li>
<ul>
</nav>
The javascript/jquery behind it:
$(function () {
$("ul").click(function () {
// here I want to get the clicked id of the li (e.g. bakkerLink)
});
});
How do I do that?

Use the .on() method with signature $(common_parent).on(event_name, filter_selector, event_listener).
Demo: http://jsfiddle.net/gLhbA/
$(function() {
$("ul").on("click", "li", function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Another method is to bind the event to li instead of ul:
$(function() {
$("li").click(function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});

Use jQuery on() instead of click and pass li as selector.
$(function() {
$("ul").on('click', 'li', function() {
//Here this will point to the li element being clicked
alert(this.id);
});
});
on() reference - http://api.jquery.com/on/

$(function() {
$("li").click(function() {
alert(this.id);
});
});
edit: jsfiddle link

Handle the click event of the <li> instead of the <ul>.
You can then get this.id.

Use the event's target (The anchor that was clicked) and then grab its parent's id:
$(function() {
$("ul").click(function(e) {
alert(e.target.parentNode.id);
});
});
JSFiddle

here is one of the way to do. Make sure your using the latest jquery file.
$("ul li").on('click', function() {
console.log($(this).attr("id"));
});

You may try
$(function () {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});
or
$(document).ready( function() {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});