homepage Welcome to WebmasterWorld Guest from 54.167.244.71
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved