WedX - журнал о программировании и компьютерных науках

Простое jQuery аккордеонное меню

Я пытаюсь реализовать меню аккордеона jquery, но у меня возникла небольшая проблема, которую я не могу решить сам.

Я использовал этот учебник https://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();
});

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

jquery css accordion
20.03.2013

  • Какой браузер вы используете? У меня отлично работает в FF19. 20.03.2013
  • Пробовал в Хроме, у меня работает нормально. Как говорит @Simon, какой браузер вы используете? 20.03.2013
  • Спасибо, ребята, пробовал в chrome, firefox и т. е. это довольно сложно заметить, но оно есть. Щелкните между «Мясные шарики спагетти» и «Равиоли со шпинатом», и вы заметите, что заголовок «Пицца» опущен примерно на 1/2 пикселя. 20.03.2013
  • Похоже, он вибрирует в I.E. 20.03.2013

Ответы:


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.

20.03.2013
  • Вы, сэр, звезда, спасибо, что решили выделить. Тем не менее, я все еще получаю очень легкий бег трусцой. 20.03.2013
  • это ошибка даже в оригинальном плагине. Я пробовал все, обнулял поля, менял легкость на линейную как для слайдов вверх, так и для слайдов вниз, но этот рывок останется. Это потому, что слайд вверх и слайд вниз не синхронизированы. Попробуйте jqueryui accordion 20.03.2013
  • Очень ценю ваше время, спасибо за попытку, я проверю это. 20.03.2013

    • 2

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

    20.03.2013
  • Я полагаю, большой вопрос будет в том, есть ли решение? Я играл с пользовательским интерфейсом, и у меня все еще есть некоторые подергивания. 20.03.2013
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]