Простой jQuery Accordion Menu jumping

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 height вместо 20px. И поэтому их общая высота растет и сжимается во время анимации и производит это мерцание.