Как создать резервную копию выпадающего меню Bootstrap 4? - PullRequest
Новая
       65

Как создать резервную копию выпадающего меню Bootstrap 4?

0 голосов
/ 27 мая 2020

Я здесь новичок, так что надеюсь, что смогу максимально прояснить свою проблему: -)

Хорошо, я работаю над довольно простым выпадающим меню в Bootstrap 4. Там довольно много кода, потому что я хочу контролировать каждый его аспект, способ, которым я его изложил, довольно беспорядочный, потому что это этап тестирования, но, надеюсь, вы увидите, что довольно легко понять, что происходит, потому что Я повсюду разместил комментарии и пометил все!

Я хотел бы использовать анимацию для перемещения раскрывающегося меню NavBar вверх и вниз с помощью переключателя. Я нашел в Интернете демонстрацию с использованием переходов, которая работает довольно хорошо, но не работает на мобильных устройствах. Ошибка заключается в том, что если вы нажмете кнопку закрытия через 3 секунды, меню закроется вместо скользящего закрытия. Он должен закрываться каждый раз. Похоже, что это постоянная ошибка из примеров, которые я видел.

Поэтому я пробую вместо этого использовать анимации, они могут делать больше, и я могу иметь еще больший контроль над элементами.

Я придумал, как использовать анимацию для перемещения вниз по меню: 

    CustomJQ('.dropdown').on('show.bs.collapse', function() {   // Dropdown Menu button is in the transition process of sliding down //

              CustomJQ(this).find(".dropdown-menu").first().removeClass('MonkeeClassAnimationDown')
              CustomJQ(this).find(".dropdown-menu").first().addClass('MonkeeClassAnimationDown')

    });

«MonkeeClassAnimationDown» - это мой класс анимации, который каждый раз прекрасно работает, непрозрачность исчезает, и он скользит вниз

Теперь сложная часть - я на всю жизнь не могу найти правильный класс или функцию Bootstrap, чтобы сказать, выражаясь языком непрофессионала: «Когда снова нажимают кнопку меню NavBar для переключения - удалите класс Animation Down и добавьте Animation Up класс". Класс Up, который у меня есть, готов и жду, я просто не вижу, как его применить

Вот ссылки:

http://tunedinevents.co.uk/__Testing/Top_NavBar_Dropdown_Menu/

http://tunedinevents.co.uk/__Testing/Top_NavBar_Dropdown_Menu/_CustomCSS

http://tunedinevents.co.uk/__Testing/Top_NavBar_Dropdown_Menu/_CustomJavascripts/CustomJS.js

Если кто-то взломал это, возможно, даже не нужно просматривать код…. Если вы знаете функцию Bootstrap JS, с которой я могу применить свою анимацию вверх при нажатии переключателя, это было бы здорово!

Надеюсь, я достаточно ясно понял ... спасибо: -)

1 Ответ

0 голосов
/ 27 мая 2020

Я действительно разобрался, я рад сказать: -) 

            // SUB DROPDOWN MENU TITLE BUTTONS //

            CustomJQ('.dropdown').on('show.bs.collapse', function() {   // Dropdown Menu button is in the transition process of sliding down //

             CustomJQ(this).find('.hide.bs.collapse').first().removeClass('MonkeeClassDelayClosingDropdownMenu');

              CustomJQ(this).on('.dropdown').addClass('MonkeeClassTopMenuMainButtonClick');  // Unhighlight the Sub Menu Title //

              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationUp');
              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationDown');
              CustomJQ(this).find('.dropdown-menu').first().addClass('MonkeeClassAnimationDown');

              CustomJQ('.MonkeeClassNavBarBackground').removeClass('peru orange yellow lime plum olive indigo');
              CustomJQ('.MonkeeClassNavBarBackground').addClass('olive');

            });

            CustomJQ('.dropdown').on('hide.bs.collapse', function() {  // Dropdown Menu button has just finished the process of sliding up //

              CustomJQ(this).find('.hide.bs.collapse').first().removeClass('MonkeeClassDelayClosingDropdownMenu');
              CustomJQ(this).find('.hide.bs.collapse').first().addClass('MonkeeClassDelayClosingDropdownMenu');

              CustomJQ(this).on('.dropdown').removeClass('MonkeeClassTopMenuMainButtonClick');  // Unhighlight the Sub Menu Title //

              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationUp');
              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationDown');
              CustomJQ(this).find('.dropdown-menu').first().addClass('MonkeeClassAnimationUp'); 

              CustomJQ('.MonkeeClassNavBarBackground').removeClass('peru orange yellow lime plum olive indigo');
              CustomJQ('.MonkeeClassNavBarBackground').addClass('plum');

            });
...