Develop Reference

alternate odd even css style to nested unordered list [duplicate]

I am searching for a way to have list items have alternating background colors. When there is a nested list the items keep alternating but the child is indented without having the background color of the parent flow down to its nested children.
It is not possible to apply classes. Also the amount of items is variable. Preferably it should work for an infinite amount of nested lists. But if that is not possible a cap on 3 depths (as in picture) should be enough. If it is easier to do by using divs instead of li and ul, that is also possible for me. I prefer pure HTML/CSS.
Because all my experiments did no good I can only supply a JSFiddle with the nested lists.
https://jsfiddle.net/qmdwpzt8/1/
<ul>
<li>Item 1
<ul>
<li>Item 1-1</li>
<li>Item 1-2
<ul>
<li>Item 1-2-1</li>
<li>Item 1-2-2</li>
</ul>
</li>
<li>Item 1-3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2-1
<ul>
<li>Item 2-1-1</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Here is one potential solution: https://jsfiddle.net/qmdwpzt8/3/
Not sure if all your requirements will be met by it, but I updated your list with div's:
<ul>
<li><div>Item 1</div>
<ul>
<li><div>Item 1-1</div></li>
<li><div>Item 1-2</div>
<ul>
<li><div>Item 1-2-1</div></li>
<li><div>Item 1-2-2</div></li>
</ul>
</li>
<li><div>Item 1-3</div></li>
</ul>
</li>
<li><div>Item 2</div>
<ul>
<li><div>Item 2-1</div>
<ul>
<li><div>Item 2-1-1</div></li>
</ul>
</li>
</ul>
</li>
<li><div>Item 3</div></li>
<li><div>Item 4</div></li>
</ul>
And then add background colors with jQuery:
$( document ).ready(function() {
var b = true;
$( "div" ).each(function( index ) {
b = !b;
if (b) {
$(this).css("background-color", "#ff0000");
} else {
$(this).css("background-color", "#00ff00");
}
});
});
This does depend on jQuery/Javascript.

Hide parent UL using jQuery at the same time show the nested child UL which was previously hidden with css

Ive got a <ul> list that is nested inside of a parent <ul> the child is hidden, i want to show it when a link is clicked in its parent. At the same time i want the parent <ul> content to be hidden (without hiding the child).
I know i could work around this by having two separate <ul> lists that were un nested but Ive been trying to keep them nested following the W3 guidelines on nested lists.
The issue Im having at the moment is that when the main list is hidden it also hides the child and does not allow it to be shown.
Ive made a jsfiddle of the issue here - http://jsfiddle.net/xc0g770z/
The HTML Im using is
<ul id="main-list">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
<li>SIX
<ul id="sub-nav">
<li>SIX - ONE</li>
<li>SIX - TWO</li>
<li>SIX - THREE</li>
<li>SIX - FOUR</li>
<li>RETRUN</li>
</ul>
</li>
<li>SEVEN</li>
<li>EIGHT</li>
</ul>
The jQuery Im using is
$("#open-submenu").click(function () {
$("#main-list").hide();
$("#sub-nav").show();
});
Any ideas how i could get this to work whilst still using the nested ?

DEMO: http://jsfiddle.net/murid/xc0g770z/1/
$("#sub-nav").hide();
$("#open-submenu a").click(function () {
$("#main-list li").hide();
$("#open-submenu").show();
$("#sub-nav").show();
$("#sub-nav li").show();
});

One way to do this would be to use class
<ul>
<li class="main-list">ONE</li>
<li class="main-list">TWO</li>
<li class="main-list">THREE</li>
<li class="main-list">FOUR</li>
<li class="main-list">FIVE</li>
<li class="main-list" id="open-submenu">SIX<li></a>
<li class="six-sub">SIX - ONE</li>
<li class="six-sub">SIX - TWO</li>
<li class="six-sub">SIX - THREE</li>
<li class="six-sub">SIX - FOUR</li>
<li class="six-sub">RETRUN</li>
<li class="main-list">SEVEN</li>
<li class="main-list">EIGHT</li>
</ul>
The in the jquery
$("#open-submenu").click(function () {
$(".main-list").hide();
$(".six-sub").show();
});

Collapsing nested lists in a hiearchy-structure with jQuery

I have a very annoying problem, which might be a product of my poor knowledge of javascript and jQuery.
I have a list that uses recursion to enable a hierarchy-structure, it looks as follows
$(function (){
$('#foo').click(function() {
$(this).children('ul').slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id='foo'>A
<ul>
<li id='foo'>B
<ul>
<li>
Sub-sub
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to accomplish a collapse function, so that when the user clicks on 'A' all the children elements collapses, and if she clicks the 'B' node all of 'B's children collapses. But however I try I always end up having all of the lists with id = 'foo' collapsing.
In my eyes, $(this).children('ul').slideToggle(); will collapse the children, since $(this) points to the list element clicked...?
Been at this for far to long now, would love some help!

Here you go... No change in HTML. But like other suggested, you need to have unique ID's
$(function (){
$('li').click(function(event) {
event.stopPropagation();
$(event.target).children('ul').slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id='foo'>A
<ul>
<li id='foo'>B
<ul>
<li>
Sub-sub
</li>
</ul>
</li>
</ul>
</li>
</ul>

how to show hide element previce element and show one nested ul

I create this nested list to show and hide items but I want ask how can I show one list and hide other for example if user click on second subject will hide all open items
HTML
<ul>
<li class="subject">List item 1 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="subject">List item 2 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li class="subject">List item 3 with subitems:
<ul id="item">
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
</ul>
javascript
$(function(){
// $("ul li").children().slideDown("slow");
$(".subject").click(function(){
$(this).find("#item").slideToggle("slow");
});
})
CSS
#item
{
display: none;
}

$(".subject").click(function(){
$(this).find("#item").slideToggle("slow");
$(this).siblings().children('ul').slideUp();
});
DEMO
or
$(".subject").click(function () {
$(this).find("#item").slideToggle("slow")
.end().siblings().children('ul').slideUp();
});
DEMO

I corrected your markup. Your IDs should always be unique; otherwise use classes.
$(function(){
$(".subject").click(function(){
$('ul.item').not( $(this).find('ul.item') ).slideUp("slow");
$(this).find('ul.item').slideDown('slow');
});
});
WORKING JSFIDDLE DEMO

click on li if no leaf node its append in another div

I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>

I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.

I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp

Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});