jquery function problem

Question

here is my html
<ul="nav">
<li><a href="#">list 1</a>
<ul="sub">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</li>
<li><a href="#">list 2</a>
<ul="sub2">
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
<li><a href="#">list 3</a> </li>

</ul>

i want to use the slideToggle function event..when list 1 and two r clicked...

Answer 1

just the jquery function event... i'm done with the css

Answer 2

i have tried this..
$(function(){
$("#nav li:eq(0)").click(function(){
$("#sub li:eq(0)").slideToggle();
$("#sub li:eq(1)").slideToggle();
});

$("#nav li:eq(1)").click(function(){
$("#sub2 li:eq(0)").slideToggle();
$("#sub2 li:eq(1)").slideToggle();
});

});

it works for the first function...not the second one, and when i try to change the event for the second function like..

$("#nav li:eq(1)").click(function(){
$("header").css("color","red");
)};

it works....what am i missing here?!!

Answer 3

html fix:

<ul id="nav">
<li><a href="#">list 1</a>
<ul id="sub">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</li>
<li><a href="#">list 2</a>
<ul id="sub2">
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
<li><a href="#">list 3</a> </li>
</ul>

jq function:

$(function() {

$("ul>li").click(function() {
$(this).children("ul").slideToggle(800);
});
});

Try to use less ID or classes if you don't realy need them and can simply access elements you need :)
For me 3 levels higher or lower is ok without special mark.

Also you can remove lvl 1 ul and make it with <nav> (navigation div,html5 tag) + <a> without any <li>
It will make your html shorter and more simple to read.
(Anyway on real practice you're make your own styling for navigation and you will not need list styling :D)

Answer 4

@Kelvine De Danielo
Idk, it makes my brains shout somethin' like "NO!NONONO!!!F**k this "
:D

Too much not necessary code,it's simpler to make it work with just 2 lines of code (like I did).
I can explain how it works if you want :)

Answer 5

@rose
Ahahaha...thanks pal, i hate too id's too...i'm just a beginner, i hope ts fixed..

Answer 6

@rose..my css codes are pretty long...and hav written some in jquery...can't u solve the puzzle without css codes?...