Develop Reference

jQuery hide all elements without class

I have a simple bit of jQuery which toggles the class "active" to an li once clicked:
$('li').click(function() {
$(this).toggleClass('active');
});
What I then want to happen is have every other li in the list hidden (display: none) then when you click the active li again it removes the active class but sets all other li's to be visible again too. This is what I am struggling to achieve.
I've tried using an if statement within the click function to check if the "active" class exists and if it does setting all li's to hidden, and if it doesn't then setting the css to show them again, but this doesn't work.
Edit:
tilz0R's answer was almost what I was looking for, I just modified it slightly to suit my needs.
$('li').click(function() {
$(this).toggleClass('active').siblings().toggleClass('hidden');
});
The hidden class simply has display: none, so that all other li's are hidden apart from the one that was clicked, and then all are shown again on the second click of the active li.

You have to find siblings of current li element.
$('li').click(function() {
$(this).toggleClass('active').siblings().hide();
});

Simply use addClass, removeClass and show() / hide()
$('li').click(function() {
if ($(this).hasClass('active')) {
$('li').show();
$(this).removeClass('active');
} else {
$('li').hide();
$(this).addClass('active').show();
}
});
li {
cursor: pointer;
}
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>

When you click any <li> tag, the all <li> tag will be hidden except selected <li>. And again click, then all <li> tag will show and remove the active class.
HTML:
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>forth</li>
</ul>
jQuery:
jQuery('ul li').click(function() {
if(jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery('ul li:not(".active")').show();
} else {
jQuery('ul li').removeClass('active');
jQuery(this).addClass('active');
jQuery('ul li:not(".active")').hide();
}
});

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/

how to find div with class inside in li with jquery

i have this HTML code
<ul>
<li>test1
<div class="sub-menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
<li>test2</li>
<li>test3</li>
<li>test4
<div class="sub-menu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
</li>
</ul>
that div.sub-menu has hidden in css.
i want when hover in a find div that inside in parent li and show it,
i try in jquery but when hover in a tag show two sub-menu div,
i want when hover in test1 show div.sub-menu that have 1,2,3,4
and when hover in test4 show div.sub-menu that have a,b,c,d

You can attach a handler for the mouseenter and mouseleave events that manipulates the associated sub-menu, for example like this:
$(document)
.on("mouseenter", "ul > li > a", function() {
$(this).siblings(".sub-menu").show();
})
.on("mouseleave", "ul > li", function() {
$(this).children("a").next(".sub-menu").hide();
});
This snippet installs delegated event handlers that show and hide the sub-menus -- note that the "hide" trigger is different from the "show" trigger because we don't want the menu to disappear as soon as the mouse pointer moves off the anchor. See it in action.
However depending on the desired result you might also be able to do this with pure CSS, e.g.
ul > li > a + .sub-menu { display: none }
ul > li:hover > a + .sub-menu { display: inline-block }
See it in action.
Both versions are structured so that they work also for nested sub-menus.

Simply hide/show the sub-menu on mouseover/mouseout:
Javascript
$("li").mouseover(function(){
$("ul", this).show();
});
$("li").mouseout(function(){
$("ul", this).hide();
});
JS Fiddle: http://jsfiddle.net/EDufY/

If You want to display menu on hover effect of li then i think u don't need javascript.
if u change css then it is posiible.
write your css like.
.sub-menu
{
display:none;
}
li:hover .sub-menu
{
display:block
}
And you have multilevel menu then give them id and repate above procedure

Try this with slide effect, http://jsfiddle.net/SmtQf/1/
$(function () {
$('ul li').hover(
function () {
$('.sub-menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
}, function () {
$('.sub-menu', this).stop(true, true).slideUp(); /*slideUp the subitems on mouseout*/
});
});

jQuery - Don't allow click event with parent has something children element?

I have a html code like this:
<div class="pagination">
<ul>
<li class="prev"><span>←</span></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="next">→</li>
</ul>
</div><!-- .pagination -->
When I add click event for li tag, I want to click li tag don't have span children element.It means that if I click on it, do nothing but other I can click and do something. How can I do it?

You can combine the :not() and :has() pseudo selectors to do that :
$('.pagination ul li:not(:has(span))').on('click', function() {
// do stuff
});
FIDDLE
It does seem easier to just do :
$('.pagination ul li a').on('click', function(e) {
e.preventDefault();
// do stuff
});

How to find a parent's child with jQuery?

I have a menu that looks like this:
<ul class="menu">
<li>zing</li>
<li>
page
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</li>
</ul>
I'd like the sub menu to fadeIn when I hover over the page link.
This is my code so far but for some reason it's not working and I don't think this is the correct way to achieve this anyways:
$('.menu li a:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Anyone know how I can reach my goal according to best standards to make the submenu of the 2nd li to appear when I hover over page?

It would probably be a good idea to have your hovers only apply to menus that have a submenu. You could do something like this:
$('.menu > li > a').filter(function(){
if( $(this).siblings('ul').length ){ return true; }
}).hover(
function(){ $(this).siblings('ul').fadeIn(150); }
,function(){ $(this).siblings('ul').fadeOut(150); }
);

The nth-child selector needs to be applied to the <li> element not the <a>.
$('.menu li ul li:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Fiddle: http://jsfiddle.net/9u3V7/

Check this fiddle out: http://jsfiddle.net/vPLAc/3/
No need for counting children that way. Every list item with a submenu will react to this code.