I've built a fairly normal menu-submenu arrangement in a vertical column -- nested ULs, using slideToggle
to expand and collapse submenus.
The problem I'm trying to solve is in the way the submenus "jump" open at the very end. (I'm testing in the latest release of Chrome.) It's probably most noticable in the second submenu, "Benefits". It doesn't jump when menus are collapsing, only when they're expanding.
I thought that the problem might have something to do with the :after
styles being added only when the menu is fully expanded. Specifically, the class current
is added to the LI tag once the menu is fully expanded. But commenting out the code that toggles that class seems to have no effect.
http://jsfiddle.net/mblase75/5gGum/
JS:
$(document).ready(function() {
$('#group-subnav > ul > li > a').on('click', function(e) {
e.preventDefault();
var $li = $(this).closest('li');
$li.find('ul').slideToggle('', function() {
$li.toggleClass('current')
}).end().siblings().find('ul').slideUp('', function() {
$li.siblings().removeClass('current')
}).end();
});
});
The CSS is considerable, and the HTML unremarkable.