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进行了一些小改动。你有一个锚点链接显示：相对。它完全没有意义，因为它永远不会有子标签。

防止轻微移动项目并再次将它们重置为原始位置

1 个答案: