2

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();
});

どんな助けでも大歓迎です！ありがとう

4

2 に答える 2

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アコーディオンを使用してみてください

于 2013-03-20T12:30:38.677 に答える
1

これについてはよくわかりませんが、過去に同じ問題が発生したことがあります。で高さ（または幅）をアニメーション化するときpxに10進値を設定できない場合、それらは。を介して整数に変換されますround。したがって、2つの要素を同時にアニメーション化し、ある時点でそれらの1つを9.5の高さに設定し、もう1つを10.5に設定すると、それに応じて10と11に変換されるため、合計の高さは20pxではなく21pxになります。そのため、アニメーション中に全体の高さが増減し、このちらつきが発生します。

于 2013-03-20T13:40:02.400 に答える