Простой jQuery аккордеон меню прыжки

Я пытаюсь реализовать меню аккордеона 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();
});

Любая помощь будет очень признательна! Спасибо

2 2
css jquery accordion

2 ответа:

Если вы зайдете на его демо-страницу и откроете его 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

2

Я не так уверен в этом, но я сталкивался с какой-то такой же проблемой в прошлом. При анимации высоты (или ширины ) в px вы не можете иметь десятичные значения, они будут преобразованы в целые числа через round. Таким образом, если вы анимируете два элемента одновременно, и один из них в какой-то момент установлен на высоту 9,5, а другой на 10,5, они будут преобразованы в 10 и 11 соответственно, так что у них будет сумма высоты 21px вместо 20px. И именно поэтому их общая высота растет и сжимается во время анимации и производит это мерцание.

1