homepage Welcome to WebmasterWorld Guest from 174.129.103.100
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

    
JQuery Select other Parents
Trying to use not() .parent().children()
rwilson




msg:4367495
 8:56 pm on Sep 26, 2011 (gmt 0)

I'm working on a creating dropdown menu. I'm trying to use
$not(this).parent().children('.expandThisContent').hide();
to hide the other dropdowns when a user scrolls from link to link (with class="expandThis". This works but only in the order of the html. Can anybody offer any insight as to how I can fix this? Thanks!

My code:


<!DOCTYPE html>
<html lang="en">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Main Menu -->
<script type="text/javascript">
$(document).ready(function () {
$(".expandThis").mouseover(function() {
$(this).children('.expandThisContent').show();
$not(this).parent().children('.expandThisContent').hide();
});
});

$(document).ready(function () {
$(".expandThisContent").mouseout(function() {
$('.expandThisContent').hide();
});
});

$(document).ready(function () {
$(".expandThisClose").click(function() {
$('.expandThisContent').hide();
});
});

</script>

</head>
<body>

<ul>
<li class="expandThis"><a href="#">Solutions</a>
<div class="expandThisContent">

<ul>
<li><a href="#">Solution 1</a></li>
<li><a href="#">Solution 2</a></li>
<li><a href="#">Solution 3</a></li>
</ul>
<a href="#" class="expandThisClose">Close</a>

</div>
</li>
<li class="expandThis"><a href="#">Products</a>
<div class="expandThisContent">

<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
<a href="#" class="expandThisClose">Close</a>

</div>
</li>
<li class="expandThis"><a href="#">Buy</a>
<div class="expandThisContent">

<ul>
<li><a href="#">Buy 1</a></li>
<li><a href="#">Buy 2</a></li>
<li><a href="#">Buy 3</a></li>
</ul>
<a href="#" class="expandThisClose">Close</a>

</div>
</li>
</ul>


</body>
</html>

 

daveVk




msg:4367616
 4:11 am on Sep 27, 2011 (gmt 0)

perhaps

$('.expandThisContent').hide();
$(this).children('.expandThisContent').show();

would suffice, seems messy doing show first.

rwilson




msg:4367749
 12:27 pm on Sep 27, 2011 (gmt 0)

Ah, that makes sense and looks cleaner. Thank you very much!

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