JQuery Select other Parents

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>

JQuery Select other Parents

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

rwilson

daveVk

rwilson

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week