Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72416

slideDown jumps abruptly at the end

$
0
0

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.


Viewing all articles
Browse latest Browse all 72416

Trending Articles