We Keep Coding

How to add active class using JQuery?

I set the active class by onclick function.
when I click A (parent li) the li tags are active.
But when I click siblings li i.e A11 are active while parent li tags are inactive, the following problems ocur:
all the siblings and parent li tags are hidden
I want to display siblings li tags along with parent li tags
My code:
<div>
<ul id="o_shop_collapse_category">
<li class="active"> A
<ul id="category">
<li>A11</li>
<li>A12</li>
</ul>
</li>
<li>B
<ul id="category">
<li> B12</li>
</ul>
</li>
</ul>
</div>
My javascript:
<script type="text/javascript">
$( document ).ready(function() {
$('#o_shop_collapse_category li:not(.active)').hide();
$('#category li').show();
});
</script>

As you can see in the snippet below, the bunch of code you provided is not enough for us to answer you. The li elements are not even clickable, for us to see the behaviour you describe.
$(document).ready(function () {
$('#o_shop_collapse_category li:not(.active)').hide();
$('#category li').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="o_shop_collapse_category">
<li class="active"> A
<ul id="category">
<li>A11</li>
<li>A12</li>
</ul>
</li>
<li>B
<ul id="category">
<li> B12</li>
</ul>
</li>
</ul>
</div>

Change background list item on click in dynamic nested List

I have nested lists draw in run time dynamic from database in away like this :
<div class="list"><ul>
<li>
listA
<ul>
<li>Alist1</li>
<li>Alist2</li>
<li>Alist3</li>
</ul>
</li>
<li>
listB
<ul>
<li>BList1</li>
<li>BList2</li>
<li>BList3</li>
</ul>
</li>
i want to change the back ground of list item when clicked but it change style of the all nested list by the following method :
var $li = $('#list li').click(function () {
$li.removeClass('selected');
$(this).addClass('selected');
});
using this style :
li.selected {
background-color: aqua;}
I know that i should use the direct descendant operator (>) to force change to parent only but my problem that list is drawn dynamically and I can't limit its levels and nested list.
is there away to always force only clicked item to be changed only ?

1- You can't use #list while your list have a class list not id list with classes you need to use dot not #
2- You need to use > like $('.list > ul > li')
$(document).ready(function(){
$('ul > li').on('click' , function(e){
e.stopPropagation();
//$('li > ul').hide();
$(this).find(' > ul').slideDown();
$(this).parent('ul').find('li').removeClass('selected');
$(this).addClass('selected');
});
});
ul{
background : #fff;
}
li > ul{
display : none;
}
li.selected{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<ul>
<li>
listA
<ul>
<li>Alist1
<ul>
<li>Alist1-1</li>
<li>Alist1-2</li>
<li>Alist1-3</li>
</ul>
</li>
<li>Alist2</li>
<li>Alist3</li>
</ul>
</li>
<li>
listB
<ul>
<li>BList1</li>
<li>BList2</li>
<li>BList3</li>
</ul>
</li>
</ul>
</div>
-- It'll be better to work with <a> see the next example
$(document).ready(function(){
$('a').on('click' , function(e){
e.preventDefault();
var GetLi = $(this).closest('li');
var GetBigUL = $(this).closest('ul');
var GetNextUL = $(this).next('ul');
GetBigUL.find('a').next('ul').not(GetNextUL).slideUp();
GetNextUL.slideDown();
GetBigUL.find('li').removeClass('selected');
GetLi.addClass('selected');
});
});
ul{
background : #fff;
}
li > ul{
display : none;
}
li.selected{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<ul>
<li>
<a>listA</a>
<ul>
<li>
<a>Alist1</a>
<ul>
<li><a>Alist1-1</a></li>
<li><a>Alist1-2</a></li>
<li><a>Alist1-3</a></li>
</ul>
</li>
<li><a>Alist2</a></li>
<li><a>Alist3</a></li>
</ul>
</li>
<li>
<a>listB</a>
<ul>
<li><a>BList1</a></li>
<li><a>BList2</a></li>
<li><a>BList3</a></li>
</ul>
</li>
</ul>
</div>

Multiple hidden menus that open and close using jQuery?

please see this fiddle http://jsfiddle.net/rabelais/tw6sdod9/
$(document).ready(function() {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function() {
$('ul#inner-li ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
$('#nav li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
$(document).ready(function() {
$('li ul#inner-li-texts').slideDown(0);
$('.no-js li a#texts').on("click", function() {
$('ul ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="no-js">
<li class="caps">Works
<ul id="inner-li">
<li>blog
</li>
<li>Portraits
</li>
<li>Paintings
</li>
<li>Drawings
</li>
<li>Photography
</li>
</ul>
</li>
<li class="caps"><a id="texts" href="#">Texts</a>
<ul id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a>
</li>
<li>Essay two
</li>
<li>Essay three
</li>
</ul>
</li>
<li class="caps">News
</li>
<li class="caps">Biography
</li>
</ul>
On this fiddle there is a menu with two sub-menus hidden under the 'Works' and 'Text' links.
What I am trying to achieve is this:
On load I want the text sub menu open and the works menu closed.
When the users clicks on either link the sub menu to that link opens or closes.
$(document).ready(function () {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function () {
$('ul#inner-li ul').slideUp(400);
if($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});

Updated the Jsfiddle
HTML
<ul class="no-js">
<li class="caps"><a class="alink" href="#">Works</a>
<ul class="cls" id="inner-li">
<li>blog</li>
<li>Portraits</li>
<li>Paintings</li>
<li>Drawings</li>
<li>Photography</li>
</ul></li>
<li class="caps"><a id="texts" class="alink" href="#">Texts</a>
<ul class="cls" id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a></li>
<li>Essay two</li>
<li>Essay three</li>
</ul>
</li>
<li class="caps"><a class="alink" href="../news.htm">News</a></li>
<li class="caps"><a class="alink" href="../biography.htm">Biography</a></li>
</ul>
Script
$(document).ready(function () {
$('ul.cls').slideUp(0);
$('a.alink').on("click", function () {
$(this).next("ul.cls").slideToggle(400);
});
});
Worked for me
Hope this helps.

Why were you adding a second click handler to #texts? There's one click handler here:
$('.no-js li a').on("click", function () {
//...
});
But then there's another one here:
$('.no-js li a#texts').on("click", function () {
//...
});
So while clicking on any other menu invokes only the first handler, clicking on #texts invokes both. It looks like you only want the first.

You add two times a click-listener for your menu.
I updated the FIDDLE
Just removed the duplicated code and added:
jQuery('#texts').click();

css class active after page reload

i'm having some trouble.
I'm doing an asp.net mvc3 application and i downloaded some css menu, the thing is i want to keep the menu active after menu tab its clicked and only change when another one is clicked.
here's the code of the menu on _Layout.cshtml
<nav>
<div class="cssmenu">
<ul>
<li class='active'><span>#Html.ActionLink("Início", "Index", "Home")</span></li>
<li><span>#Html.ActionLink("Tarefas Contabilidade", "SelectEmpresa", "Empresa")</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar clientes", "ListarEmpresas", "Empresa")</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>#Html.ActionLink("Listar registos", "ListaBalancetesPorSalaoMes", "Balancete")</span></li>
</ul>
</li>
<li><span>#Html.ActionLink("Sobre", "About", "Home")</span></li>
</ul>
</div>
</nav>
and i have this script:
<script type="text/javascript">
$("li").click(function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
the first tab that i put there class= "active" works, but the script doesn't seem to work when i click another menu tab, it only shows the first one active
a little help please :)
UPDATED
This is the rendered html:
<nav>
<div class="cssmenu">
<ul>
<li><span>Início</span></li>
<li><span>Tarefas Contabilidade</span></li>
<li><a href='#'><span>Clientes</span></a>
<ul>
<li><span>Listar clientes</span></li>
<li><span>Listar salões</span></li>
<li><span>Gerir empregados</span></li>
<li><span>Novo cliente</span></li>
<li><span>Novo salão</span></li>
</ul>
</li>
<li><a href='#'><span>Balancetes</span></a>
<ul>
<li><span>Listar registos</span></li>
<li><span>Upload novo balancete</span></li>
<li><span>Mapa Resultados/Gráfico</span></li>
<li><span>Mapas Contabilidade/Gestão</span></li>
<li><span>Análise Rentabilidade</span></li>
<li><span>Alterar taxas</span></li>
</ul>
</li>
<li><span>Sobre</span></li>
</ul>
</div>
</nav>
i dont know if i should put the javascript inside the div or something xD
Ty

You can use child selector which selects all direct child elements, Try the following:
$(document).ready(function(){
$(".cssmenu > ul > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
})
If you want to select the li tags of the inner ul tags, you can try:
$(document).ready(function() {
$("ul:eq(1) > li").click(function() {
$('ul:eq(1) > li').removeClass("active");
$(this).addClass("active");
});
})

Can you try:
<script type="text/javascript">
$("li a").bind('click', function () {
$("li").removeClass("active");
$(this).addClass("active");
});
</script>
li items are not clickable, so you must bind the click event to a.

try
$("li").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("active").end().addClass("active");
});

How do I slide/open specific menu item using javascript / jquery on page load?

I'm new to java and jquery scripting, I've managed to learn how to open menu on item mouse click, but how do I open specific menu on page load?
I'm using this:
<!-- menu -->
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a>About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a>Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
<!-- menu end -->
and my javascript on click is this:
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
but my quest is: how do I open specific item(s) on page load? How do I open menu item 2 for example ("about"), or menu utem 3 ("projects"), etc...?

quite easy actually;
$('#menu li a:eq(1)').trigger('click'); //open "about"
$('#menu li a:eq(2)').trigger('click'); //open "projects"
hope I helped

Put an id to your a tags like
<div id="menuone">
<ul id="menu">
<li>
Home
</li>
<li>
<a id="about">About</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>
<a id="projects">Projects</a>
<ul>
<li>project1</li>
<li>project2</li>
<li>project3</li>
</ul>
</li>
</ul>
</div>
and then pass an id of your choice to your function like
// Pay attention to pass id to function
function initMenu(id)
{
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
});
// Add following lines
if (typeof(id) != 'undefined')
{
$('#'+id).click();
}
}
$(document).ready(function() {initMenu('projects');});
Then to change you can use instead
$(document).ready(function() {initMenu('about');});