jquery - Horizontal Javascript menu error -
i have small problem javascript menu.
when choose item shows me last sub menu.
this simple people professionals in javascript :p
here sample:
css
ul#midnav { border-width: 1px 0; list-style: none; margin-bottom: 5px; text-align: center; border-bottom: solid thin #c8c8c8; padding: 0px 0px 13px 0px; } ul#midnav li { display: inline; padding: 0px 0px; } ul#midnav li { text-transform:uppercase; font-size:11px; padding: 5px 13px 0px 5px; background: url('../image/arrow-topdown-gray.png') 100% 9px no-repeat; } ul#midnav li ul { line-height: 28px; padding: 0; position: absolute; top: -30px; background: none; display: none; /* --hide default--*/ width: 960px; height:28px; background: #fff; border-top: solid thin #eeeeed; } ul#midnav li ul { background: url('../image/arrow-left-gray.png') 100% 9px no-repeat; } html
<div id="navigation"> <div id="mid-nav"> <ul id="midnav"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1.1</a> </li> <li><a href="#">item 1.2</a> </li> </ul> </li> <li><a href="#">item 2</a> <ul> <li><a href="#">item 2.1</a> </li> <li><a href="#">item 2.2</a> </li> </ul> </li> <li><a href="#">item 3</a> <ul> <li><a href="#">item 3.1</a> </li> <li><a href="#">item 3.2</a> </li> </ul> </li> <li><a href="#">item 4</a> <ul> <li><a href="#">contact us</a> </li> <li><a href="#">item 4.1</a> </li> <li><a href="#">item 4.2</a> </li> </ul> </li> <li><a href="#">item 5</a> <ul> <li><a href="#">item 5.1</a> </li> <li><a href="#">item 5.2</a> </li> </ul> </li> </ul> </div> </div> </div> javascript
$(document).ready(function () { $('ul#midnav li a').on('click', function (event) { event.preventdefault(); $('#mid-nav > ul').find('ul').slideup(function () { $(this).closest('li').find('ul').slidetoggle(); }); }); });
this in ready handler refers wrong object:
$(document).ready(function () { $('ul#midnav li a').on('click', function(event){ event.preventdefault(); var e=this; // must alias or 'this' refer // last submenu slid hiding // instead of 1 open $('#mid-nav > ul').find('ul').slideup( function(){ $(e).closest('li').find('ul').slidetoggle(); // 'e' instaed of 'this' }); }); }); 
Comments
Post a Comment