簡單的jQuery手風琴菜單跳

我想實現一個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(); 
});

任何幫助將不勝感激！謝謝

來源

2013-03-20 monsterboy

你使用什麼瀏覽器？對我來說FF19完美的工作。 – Simon 2013-03-20 12:01:42

我在Chrome中試過，對我來說工作正常。就像@Simon說的那樣，你使用的是哪種瀏覽器？ – 97ldave 2013-03-20 12:04:49

謝謝你們，我們嘗試過使用Chrome，firefox，也就是很難注意到，但它在那裏。點擊「意大利麪肉丸」和「菠菜餛飩」，你應該注意到「比薩」頭被推下了大約1/2像素。 – monsterboy 2013-03-20 12:30:00

如果你去他的演示頁面的源代碼並打開他的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

來源

2013-03-20 12:30:38

你先生是明星，謝謝你解決了突出顯示。儘管如此，仍然有輕微的慢跑。 – monsterboy 2013-03-20 12:34:57

即使在原始插件中，這也是一個錯誤。我已經嘗試了一切，調整邊距填充，將滑動和滑動變爲線性，但這種混亂將保持不變。因爲滑動和滑動不同步。嘗試jqueryui [手風琴]（http://jqueryui.com/accordion/） – 2013-03-20 12:57:21

真的很感謝你的時間，謝謝你的努力，我會檢查出來。 – monsterboy 2013-03-20 13:00:04

我不敢肯定，但我也遇到某種同樣的問題在過去。當您在px中設置動畫高度（或寬度）時，您不能使用小數值，它們將通過round轉換爲整數。因此，如果您同時爲兩個元素設置動畫，並且其中一個元素在某個點的高度設置爲9.5，另一個元素的值設置爲10.5，則它們將相應地轉換爲10和11，因此它們將具有21px的高度，而不是20px。這就是爲什麼他們的總高度在動畫中增長和縮小，併產生這種閃爍。

來源

2013-03-20 13:40:02 xpy

我想大問題會是有解決方案嗎？我玩過用戶界面，我仍然有些抽搐。 – monsterboy 2013-03-20 19:16:46

簡單的jQuery手風琴菜單跳

回答

相關問題