toggling navigation - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

toggling navigation

dupalo

11:58 am on Nov 11, 2012 (gmt 0)

10+ Year Member

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

2:19 pm on Nov 13, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

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

11:47 am on Mar 1, 2013 (gmt 0)

10+ Year Member

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

7:31 am on Mar 13, 2013 (gmt 0)

10+ Year Member

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>