Question

我正在尝试实现一个jquery手风琴菜单但是，我遇到了一个我无法弄明白的问题。

我使用本教程http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/构建它并且一切正常，但每次选择新项目时整个菜单都会略微跳跃。

我猜它与css有关但却无法找到它。另外，你能告诉我如何在打开时突出显示菜单栏，这是脚本。

$(document).ready(function() { 
//ACCORDION BUTTON ACTION   
$('div.accordionButton').click(function() {
    $('div.accordionContent').slideUp('slow');
    $(this).next().slideDown('slow');
}); 
//HIDE THE DIVS ON PAGE LOAD    
$("div.accordionContent").hide();
});

任何帮助将不胜感激！感谢

Answer 1

如果您转到他的演示页面的源代码并打开他的javascript，那么您将找到不同的代码。链接中的代码是错误的。如果再次单击某个项目，它将向上滑动并向下滑动。

$(document).ready(function() {

    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.accordionButton').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('.accordionButton').removeClass('on');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.accordionContent').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($(this).next().is(':hidden') == true) {

            //ADD THE ON CLASS TO THE BUTTON
            $(this).addClass('on');

            //OPEN THE SLIDE
            $(this).next().slideDown('normal');
         } 

     });


    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
    $('.accordionButton').mouseover(function() {
        $(this).addClass('over');

    //ON MOUSEOUT REMOVE THE OVER CLASS
    }).mouseout(function() {
        $(this).removeClass('over');                                        
    });

    /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/


    /********************************************************************************************************************
    CLOSES ALL S ON PAGE LOAD
    ********************************************************************************************************************/   
    $('.accordionContent').hide();

});

为避免混蛋尝试使用jqueryui accordion

Answer 2

我对此不太确定，但过去我遇到过同样的问题。在px中设置动画高度（或宽度）时，您无法获得十进制值，它们将通过round转换为整数。因此，如果你同时动画两个元素，其中一个在某个点设置为9.5的高度，另一个设置为10.5，它们将相应地转换为10和11，因此它们的总和高度为21px而不是20像素。这就是为什么他们的总高度在动画期间会增长和缩小并产生这种闪烁的原因。

简单的jQuery手风琴菜单跳跃

2 个答案: