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不能有十进制值时，它们将通过round. 因此，如果您同时为两个元素设置动画，其中一个在某个点设置为高度 9.5，另一个设置为 10.5，它们将相应地转换为 10 和 11，因此它们的高度总和为 21px，而不是 20px。这就是为什么它们的总高度在动画期间会增长和缩小并产生这种闪烁。

于 2013-03-20T13:40:02.400 回答