Welcome to WebmasterWorld Guest from 54.160.163.163

Forum Moderators: open

Message Too Old, No Replies

JQuery Select other Parents

Trying to use not() .parent().children()

     

rwilson

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

5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



perhaps

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

would suffice, seems messy doing show first.

rwilson

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

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month