| jquery and showing bullet list navigation
|
dupalo
msg:4459406 | 12:45 pm on May 30, 2012 (gmt 0) |
HI there, I wonder if you can help me at all. I am working on a small test, basically I would like my page to have a sort of bullet list navigation so that if I click on a list element then a sub navigation opens up, but I am having some troubles with it. Here's my code:
relevant HTML:
...
<head>
<title>This is a test</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type = "text/javascript" src = "script.js"></script>
</head>
<body>
<div class = "wrapper">
<div class = "navigation">
<ul class = "nav_bullet">
<li><a href = "#">Section one</a>
<ul class = "nested hidden">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul><!-- end of nested -->
</li>
<li><a href = "#">Section two</a>
<ul class = "nested hidden">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul><!-- end of nested -->
</li>
<li><a href = "#">Section three</a>
<ul class = "nested hidden">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul><!-- end of nested -->
</li>
<li><a href = "#">Section four</a>
<ul class = "nested hidden">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul><!-- end of nested -->
</li>
</ul>
</div><!-- end of navigation -->
...
Relevant CSS:
...
...
.navigation
{
border: 1px solid blue;
width:19%;
float:left;
margin-top:70px;
}
.clearing
{
clear:both;
}
.nav_bullet li
{
list-style:square;
}
.nested li
{
list-style:none;
}
.hidden
{
display:none;
}
.visible
{
display:block;
}
...
script:
$(document).ready(function(){
$(".nav_bullet li").click(function(){
$(".nav_bullet li ul").removeClass("hidden").addClass("visible");
});
});
Now, that works to an extent. When the list item in the list with nav_bullet is clicked on the nested lists have their hidden class removed and get a class visible which shows the element. The thing is that the above code brings makes appear all the nested lists whereas I need only the nested list whose parent list item has been clicked on.
I have 4 sublists so I need a way to say if I click on the first list show only its child list and not them all.
I have looked at filters but nothing seems to be the one for me simply because realistically I can click on any of the visible list item, in any order and I need to bring up just the child...How should I proceed? I know it can be done in different ways but I would like to try to stick to this adding/removing classes, only thing is I am not sure how to make sure that the right sublist comes up when I click on the parent list. ANy help much appreciated
thanks
|
|
