| toggling navigation
|
dupalo
msg:4517981 | 11:58 am on Nov 11, 2012 (gmt 0) |
Hi, I am having some funny problems with hiding and showing the navigation and I am not entirely sure why. here's the code:
html:
...
<!-- NAVIGATION -->
<div id="navBox">
<ul>
<li class="mainList"><a href="#">Item 1</a>
<ul class="subList">
<li><a href="#">sub item1.1</a></li>
<li><a href="#">sub item1.2</a></li>
<li><a href="#">sub item1.3</a></li>
</ul>
</li>
<li class="mainList"><a href="#">Item 2</a>
<ul class="subList">
<li><a href="#">sub item2.1</a></li>
<li><a href="#">sub item2.2</a></li>
<li><a href="#">sub item2.3</a></li>
</ul>
</li>
<li class="mainList"><a href="#">Item 3</a>
<ul class="subList">
<li><a href="#">sub item1.1</a></li>
<li><a href="#">sub item1.2</a></li>
<li><a href="#">sub item1.3</a></li>
</ul>
</li>
</ul>
</div>
<!-- END OF NAVIGATION -->
...
css:
#navBox{
border:1px solid yellow;
width:400px;
}
#navBox ul > li > ul{
display:none;
}
and the script:
$(".mainList a").click(function(){//I tried also with a different selector $(".mainList li")
$(this).find("ul").toggle();
});
But it doesn't work, and I am not sure why. In the script I am targeting each link in a li item$(".mainList a"), assigning a click function then find the relevant ul and toggle it. But, alas, it doestn' work. What am I getting wrong please?
|
Fotiman
msg:4518730 | 2:19 pm on Nov 13, 2012 (gmt 0) |
The jquery Find [api.jquery.com] method finds descendants. In your code example, <ul> elements are never descendants of <a> elements, so nothing will ever be found.
Instead, you might try the Next [api.jquery.com] method, which finds the next sibling.
|
Gowri pandiyan
msg:4550094 | 11:47 am on Mar 1, 2013 (gmt 0) |
Hi,
Please check the below code for your requirement.
<HTML>
<HEAD>
<style>
.subList
{
display:"none";
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".mainList:contains(Item 1)").click(function(){
$(".subList:contains(sub item1.1)").toggle();
});
$(".mainList:contains(Item 2)").click(function(){
$(".subList:contains(sub item2.1)").toggle();
});
$(".mainList:contains(Item 3)").click(function(){
$(".subList:contains(sub item3.1)").toggle();
});
});
</script>
</HEAD>
<BODY>
<div id="navBox">
<ul>
<li class="mainList"><a href="#">Item 1</a>
<ul class="subList">
<li><a href="#">sub item1.1</a></li>
<li><a href="#">sub item1.2</a></li>
<li><a href="#">sub item1.3</a></li>
</ul>
</li>
<li class="mainList"><a href="#">Item 2</a>
<ul class="subList">
<li><a href="#">sub item2.1</a></li>
<li><a href="#">sub item2.2</a></li>
<li><a href="#">sub item2.3</a></li>
</ul>
</li>
<li class="mainList"><a href="#">Item 3</a>
<ul class="subList">
<li><a href="#">sub item3.1</a></li>
<li><a href="#">sub item3.2</a></li>
<li><a href="#">sub item3.3</a></li>
</ul>
</li>
</ul>
</div>
</BODY>
</HTML>
|
Gowri pandiyan
msg:4554197 | 7:31 am on Mar 13, 2013 (gmt 0) |
The below is the revised code.
JS:
<script>
$(document).ready(function(){
$(".mainList:contains(Item 1)").click(function(){
$(".subList:contains(sub item1.1)").toggle();
});
$(".mainList:contains(Item 2)").click(function(){
$(".subList:contains(sub item2.1)").toggle();
});
$(".mainList:contains(Item 3)").click(function(){
$(".subList:contains(sub item3.1)").toggle();
});
});
</script>
HTML:
<div id="navBox">
<ul>
<li class="mainList"><a href="#">Item 1</a>
<ul class="subList" style="display:none">
<li><a href="#">sub item1.1</a></li>
<li><a href="#">sub item1.2</a></li>
<li><a href="#">sub item1.3</a></li>
</ul>
</li>
<li class="mainList"><a href="#">Item 2</a>
<ul class="subList" style="display:none">
<li><a href="#">sub item2.1</a></li>
<li><a href="#">sub item2.2</a></li>
<li><a href="#">sub item2.3</a></li>
</ul>
</li>
<li class="mainList"><a href="#">Item 3</a>
<ul class="subList" style="display:none">
<li><a href="#">sub item3.1</a></li>
<li><a href="#">sub item3.2</a></li>
<li><a href="#">sub item3.3</a></li>
</ul>
</li>
</ul>
</div>
|
|
|
