Accordion menu problem

JavaScript
1

Hello guys,
i’m trying to code an accordion menu with categories for a website!

Here the HTML:


<div id="accordion_prodotti">
	<ul id="accordion">
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a>
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 4</a>
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 5</a>
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
			</ul>
		</li>
	</ul>
</div>

Here the jQuery Code:


// Accordion
$('#accordion li').click(function() {
	if ($('ul', this).is(':visible')) {
		// Nascondi sottoMenu
		$("ul", this).stop(true, true).slideUp(200);
	} else {
		// Mostra sottoMenu
		$("ul", this).stop(true, true).delay(50).slideDown(100);
	}
});

Ok, this is what i wrote in my page but the problem is:
When i click on a “Menu”, the “Item” should SlideDown and when i click back on the same “Menu” it should SlideUp! this works correctly, but what, if i click on a “Item” instead of a “Menu”?! The clicked “Menu” SlideUp! What’s wrong with it? I just want to SlideUp/Down when i click on a “Menu” and not when i click on a “Item”!

I have to say that i’m not a good coder in jQuery and probably i missed some classes to do it! but i would like to learn it aswell, reading some books and tutorials!

Any ideas, tips? I’d appreciate it! Thank you…

2

Here the CSS if it needs:

#accordion_prodotti {
	border: 1px solid black;
	width: 200px;
	height: 300px;
}

#accordion ul {
	display: none;
}

#accordion ul li {
	font-size: 11px;
}

#accordion a {
	text-decoration: none;
	color: black;
}

#accordion li:hover {
	font-size: 12px;
}
3

Your selector is selecting ALL of the li elements that are inside of #accordion, including nested ones.

If you only want direct descendants of #accordion to be affected, then that is the selection that you need to use.
‘#accordion>li’

4 

$('#accordion li').click();

it should select all the <li> into this tag:


<ul id="accordion">

…but why does it select the others <li> into <ul> that haven’t an id=“accordion”?! it shouldn’t happen i think, bacause i’m not selecting them all…

this is the “fixed” code with the same problem, i mean just less rows:


$('#accordion li').click(function () {
	$('ul', this).toggle();
});

I would really happy if someone could help me. Thanks again

5

Because that’s how a CSS selector works.
If you use a CSS selector to say that all paragraphs in the footer should be green, that affects all of the paragraphs in the footer, no matter how deeply nested they are, not just those that are direct descendants of the footer itself.

See my previous post about using > to select only direct descendants.

6

Ye, right! that’s so strange how jQuery is changing my way to think and act on a site web! Thank you for replying! :slight_smile:

7 

$('#accordion >li > ul').hide().click(function(e) {
	e.stopPropagation();
});

$('#accordion >li').toggle(function() {
	$(this).find('ul').slideDown();
}, function() {
	$(this).find('ul').slideUp();
});

That’s it, that’s all!

8

With ‘#accordion >li > ul’ too, you can simplify that to ‘#accordion ul’ because there are no other UL elements that you need to filter out of that.