Created
February 9, 2012 06:06
Find the jQuery Bug #4: Solution
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul id="menu"> | |
| <li><a href="#">Browsers</a> | |
| <ul> | |
| <li><a href="#">Firefox</a></li> | |
| <li><a href="#">Google Chrome</a></li> | |
| <li><a href="#">Internet Explorer</a></li> | |
| <li><a href="#">Opera</a></li> | |
| <li><a href="#">Safari</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Editors</a> | |
| <ul> | |
| <li><a href="#">Sublime Text 2</a></li> | |
| <li><a href="#">TextMate</a></li> | |
| <li><a href="#">Visual Studio</a></li> | |
| <li><a href="#">WebStorm</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Languages</a> | |
| <ul> | |
| <li><a href="#">C#</a></li> | |
| <li><a href="#">CoffeeScript</a></li> | |
| <li><a href="#">JavaScript</a></li> | |
| <li><a href="#">Ruby</a></li> | |
| <li><a href="#">Visual Basic</a></li> | |
| </ul> | |
| </li> | |
| </ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> | |
| <meta charset=utf-8 /> | |
| <title>JS Bin</title> | |
| <!--[if IE]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <style> | |
| article, aside, figure, footer, header, hgroup, | |
| menu, nav, section { display: block; } | |
| /* http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery */ | |
| #menu, #menu ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style-type: none; | |
| list-style-position: outside; | |
| position: relative; | |
| line-height: 1.5em; | |
| } | |
| #menu a:link, #menu a:active, #menu a:visited{ | |
| display: block; | |
| padding: 0px 5px; | |
| border: 1px solid #333; | |
| color: #fff; | |
| text-decoration: none; | |
| background-color: #333; | |
| } | |
| #menu a:hover { | |
| background-color: #fff; | |
| color: #333; | |
| } | |
| #menu li { | |
| float: left; | |
| position: relative; | |
| } | |
| #menu ul { | |
| position: absolute; | |
| width: 12em; | |
| top: 1.5em; | |
| display: none; | |
| } | |
| #menu li ul a { | |
| width: 12em; | |
| float: left; | |
| } | |
| #menu ul ul{ | |
| top: auto; | |
| } | |
| #menu li ul ul { | |
| left: 12em; | |
| margin: 0px 0 0 10px; | |
| } | |
| #menu li:hover ul ul, | |
| #menu li:hover ul ul ul, | |
| #menu li:hover ul ul ul ul { | |
| display:none; | |
| } | |
| #menu li:hover ul, | |
| #menu li li:hover ul, | |
| #menu li li li:hover ul, | |
| #menu li li li li:hover ul{ | |
| display:block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul id="menu"> | |
| <li><a href="#">Browsers</a> | |
| <ul> | |
| <li><a href="#">Firefox</a></li> | |
| <li><a href="#">Google Chrome</a></li> | |
| <li><a href="#">Internet Explorer</a></li> | |
| <li><a href="#">Opera</a></li> | |
| <li><a href="#">Safari</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Editors</a> | |
| <ul> | |
| <li><a href="#">Sublime Text 2</a></li> | |
| <li><a href="#">TextMate</a></li> | |
| <li><a href="#">Visual Studio</a></li> | |
| <li><a href="#">WebStorm</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Languages</a> | |
| <ul> | |
| <li><a href="#">C#</a></li> | |
| <li><a href="#">CoffeeScript</a></li> | |
| <li><a href="#">JavaScript</a></li> | |
| <li><a href="#">Ruby</a></li> | |
| <li><a href="#">Visual Basic</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( document ).ready( function() { | |
| $( "#menu li" ).hover( | |
| function() { | |
| $( this ).find( "ul" ) | |
| .stop( true, true ) | |
| .slideToggle(); | |
| }, | |
| function() { | |
| $( this ).find( "ul" ) | |
| .stop( true, true ) | |
| .slideUp(); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( document ).ready( function() { | |
| $( "#menu li" ).hover( | |
| function() { | |
| $( this ).find( "ul" ) | |
| .stop( true, true ) | |
| .slideDown( 400, "easeOutBounce", function() { | |
| $( this ).trigger( "opened" ); | |
| }); | |
| }, | |
| function() { | |
| $( this ).find( "ul" ) | |
| .stop( true, true ) | |
| .slideUp( 400, "easeOutBounce", function() { | |
| $( this ).trigger( "closed" ); | |
| }); | |
| }); | |
| $( "#menu" ).on( "opened closed", "ul", function( e ) { | |
| console.log( "menu ul was: " + e.type ); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( document ).ready( function() { | |
| $( "#menu li" ).hover( function( e ) { | |
| $( this ).find( "ul" ) | |
| .stop( true, true ) | |
| .slideToggle( 400, "easeOutBounce", function() { | |
| var eventType = | |
| e.type === "mouseover" ? "opened" : "closed"; | |
| $( this ).trigger( eventType ); | |
| }); | |
| }); | |
| $( "#menu" ).on( "opened closed", "ul", function( e ) { | |
| console.log( "menu ul was: " + e.type ); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment