jquery - 防止 onclick 稍微移动项目并将它们重新重置到原始位置

Question

我需要一些关于垂直菜单问题的建议。

我现在的问题是，当我单击一个按钮时，我的其他按钮会向下移动一个像素，然后又直接向上移动。只是看起来生根了。例如点击“迈克尔”、“琼斯”、“科威特”我们的“超人”。您会看到屏幕底部有一个小移动，然后它会重置到原始位置。

var accordion_head = $('.accordion > li > a'),  
accordion_body = $('.accordion li > .sub-menu');
accordion_head.on('click', function (event) {
    if ($(this).attr('class') != 'active') {
        accordion_body.slideUp('normal');
        $(this).next().stop(true, true).slideToggle('normal');
        accordion_head.removeClass('active');
        $(this).addClass('active');
    }
});

您可以在这里找到它:http://jsfiddle.net/RTcf3/

如何解决这个问题？感谢帮助。

非常感谢，祝周末愉快

TD。

Answer 1

编辑:我会稍微更改一下您的代码，并让它检查当前菜单是否确实有子菜单，这样它就不会尝试显示空的 ul(以防您有一些带有子菜单的菜单，并且其他没有子菜单)。如果您需要帮助来做到这一点，请告诉我。

这是我对此的看法 fiddle :

$('.accordion > li').on('click', function (evt) {
    var accordion_body = $('.sub-menu', this);
    if($(this).hasClass('active')) {

    } else {
        $('.active .sub-menu').slideUp();
        $('.active').removeClass('active');
        $(this).addClass('active');
        if(accordion_body.is(':empty')){

        } else {
            accordion_body.slideDown('normal');
        }
    }   
});

我还对你的 CSS 做了一些小改动。您有一个显示:相对的 anchor 链接。它根本没有意义，因为它永远不会有子标签。