Advanced Search

jQuery toggle() issue

/ Published in: JavaScript
Save to your folder(s)
I am having an issue making the div stay opened when it gets animated

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. </head>
  7. <style>
  8. .main_nav {
  9. 	background: #003580;
  10. 	color:#fff;
  11. 	width:800px;
  12. 	height:400px;
  13.  
  14. }
  15. .main_nav_full {
  16.  
  17. 	width:1000px;
  18. }
  19. .nav_col {
  20. 	float:left;
  21. 	width:200px;
  22. }
  23.  
  24.  
  25. .toplevelnav li{
  26.  
  27. 	list-style-type: none;
  28.  
  29. }
  30.  
  31. .toplevelnav{
  32. 	margin-bottom: -20px;
  33. }
  34.  
  35. .red{
  36. 	background-color: red;
  37. }
  38.  
  39. .drop-down{
  40. 	background-color: #021E2F;
  41. 	height: inherit;
  42.  
  43. }
  44.  
  45. .drop-down ul{
  46. 	padding-top: 50px;
  47. }
  48.  
  49. .main_nav ul{
  50. 	list-style-type: none;
  51. 	padding-left: 10px;
  52. }
  53.  
  54. h5{
  55. 	font-size: 20px;
  56. 	padding-left: 10px;
  57. 	border-bottom: 1px solid grey;
  58. 	margin: 5px;
  59. 	color: #0082D1;
  60. }
  61. .main_nav a{
  62. 	text-decoration: none;
  63. 	font-size: 14px;
  64. 	text-transform: uppercase;
  65. 	color: white;
  66. }
  67. .navimage{
  68.  	/*background-image: url("../../navstudents.jpg");*/
  69. 	height: inherit;
  70. }
  71. .main_nav li:hover{
  72. 	background-color: blue;
  73. }
  74. .main_nav #space{
  75.  
  76. 	height:366px;
  77. 	width:295px;
  78. 	background-image:url('navstudents.jpg');
  79. 	background-repeat:no-repeat;
  80. 	background-position: bottom right;
  81. 	z-index:100;
  82. 	margin-left:505px;
  83. 	padding-top:35px;
  84. 	border:0;
  85.  
  86.  
  87.  
  88. }
  89.  
  90. .main_nav_full #space{
  91.  
  92. 	height:366px;
  93. 	width:295px;
  94. 	background-image:url('navstudents.jpg');
  95. 	background-repeat:no-repeat;
  96. 	background-position: bottom right;
  97. 	z-index:100;
  98. 	margin-left:705px;
  99. 	padding-top:35px;
  100. 	border:0;
  101.  
  102.  
  103.  
  104. }
  105.  
  106. </style>
  107. <body>
  108. <div class="toplevelnav">
  109. 	<ul><li><span class="showdropnav">HOVER</span></li></ul>
  110. </div>
  111. <div class="main_nav">
  112.  
  113.   <div class="nav_col">
  114.   <h5>HEADING</h5>
  115.     <ul>
  116.       <a href="#"><li>LINK</li></a>
  117.       <a href="#" class="drop_down_link" dropDownName="drop-down-1"><li>HOVER</li></a>
  118.       <a href="#" class="drop_down_link" dropDownName="drop-down-2"><li>HOVER</li></a>
  119.       <a href="#"><li>LINK</li></a>
  120.       <a href="#"><li>LINK</li></a>
  121.       <a href="#"><li>LINK</li></a>
  122.  
  123.     </ul>
  124.   </div>
  125.   <div class="nav_col drop-down drop-down-1">
  126.  
  127.     <ul>
  128. 	<a href="#"><li>LINK</li></a>
  129. 	<a href="#"><li>LINK</li></a>
  130. 	<a href="#"><li>LINK</li></a>
  131.     </ul>
  132.   </div>
  133.   <div class="nav_col drop-down drop-down-2">
  134.  <ul>
  135. 	<a href="#"><li>LINK</li></a>
  136. 	<a href="#"><li>LINK</li></a>
  137.     </ul>
  138.   </div>
  139.  
  140.   <div class="nav_col">
  141.   <h5>HEADING</h5>
  142.     <ul>
  143.       <a href="#"><li>LINK</li></a>
  144.       <a href="#"><li>LINK</li></a>
  145.  
  146.     </ul>
  147.   </div>
  148.   <div class="nav_col">
  149.   <h5>HEADING</h5>
  150.     <ul>
  151.       <a href="#"><li>LINK</li></a>
  152.       <a href="#"><li>LINK</li></a>
  153.       <a href="#"><li>LINK</li></a>
  154.       <a href="#"><li>LINK</li></a>
  155.       <a href="#"><li>LINK</li></a>
  156.       <a href="#"><li>LINK</li></a>
  157.       <a href="#"><li>LINK</li></a>
  158.       <a href="#"><li>LINK</li></a>
  159.       <a href="#"><li>LINK</li></a>
  160.       <a href="#"><li>LINK</li></a>
  161.  
  162.     </ul>
  163.   </div>
  164.   <div class="nav_col">
  165.     <h5>HEADING</h5>
  166.  
  167.     <ul>
  168.       <a href="#"><li>LINK</li></a>
  169.       <a href="#" class="drop_down_link" dropDownName="drop-down-3"><li>HOVER</li></a>
  170.       <a href="#"><li>LINK</li></a>
  171.     </ul>
  172.  
  173.   </div>
  174.    <div class="nav_col drop-down drop-down-3 third-drop">
  175.     <ul>
  176.       <a href="#"><li>LINK</li></a>
  177.       <a href="#"><li>LINK</li></a>
  178.     </ul>
  179.   </div>
  180. <div id="space"></div>
  181. </div>
  182. </body>
  183. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" language="javascript"></script>
  184. <script>
  185. 	$('.drop-down').hide();
  186. 	$('.main_nav').hide();
  187.  
  188. 	$('.showdropnav').hover(function(){$('.main_nav').show()}, function(){$('.main_nav').hide()});
  189. 	$('.main_nav').hover(function(){$('.main_nav').show()}, function(){$('.main_nav').hide()});
  190.  
  191. 	$('.drop-down').hover(function(){
  192. 		$(this).show();
  193. 		if($('a.drop_down_link').hover()){	
  194. 			$('div.main_nav').toggleClass("main_nav_full");
  195. 		} 
  196. 		}, function(){
  197. 			$(this).hide();
  198. 				if($('a.drop_down_link').hover()){
  199. 					$('div.main_nav').toggleClass("main_nav_full");
  200. 				} 		
  201. 			});
  202.  
  203. 	$('a.drop_down_link').hover(function(){
  204.  
  205. 		var dropDown = $(this).attr("dropDownName");
  206.  
  207.  
  208. 		if($('.drop_down').hover()){
  209. 			$('div.main_nav').toggleClass("main_nav_full");
  210.  
  211. 			$('div.'+dropDown).stop(false,true,true).toggle(300,function(){});
  212.  
  213. 		}
  214. 		else{
  215.  
  216.  
  217.  
  218. 		}
  219.  
  220.  
  221.  
  222.  
  223.  
  224.  
  225.  
  226.  
  227.  
  228. 	});
  229. </script>
  230. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.