Menu Jquery css html

Question

Mam menu wykonane w boostrapie (Yamm !3 Megamenu)  i przy użyciu jquery zrobiłem żeby po najechaniu cursorem wyswietlało się dropdown-menu i wszystko działa w porządku tylko mam pytanie jak zrobić że gdy rozdzielczość okna jest mniejsza niż 768px znów trzaba klikać zeby dropdown-menu się pokazało (to jest ten etap kiedy menu zamieniło się w button, button rosuwam i chce żeby dropdown-menu było na kliknięcie a nie dalej na hover)

Tak wygląda mój kod w jquery

 

 

 

$(function(){
        
            var x = $(window).width();
            console.log(x);

            
                $(".dropdown").hover(function(){
                $('.dropdown-menu', this).stop( true, true ).fadeIn("500");
                $(this).toggleClass('open')},
            function() {
                $('.dropdown-menu', this).stop( true, true ).fadeOut("500");
                $(this).toggleClass('open');
                             
            });
            

    });

Comments

Zmień kategorie i wrzuć kod w bloczek kodu (ostatnia ikonka w edytorze) :)

Answer 1

$(window).resize(function(){

var windowWidth = $(window).width();

if ( windowWidth >768) {
 // twój kod na hover
}

});

==
W takiej sytuacji, gdy szerokość ekranu będzie większa niż 768 pixeli to menu buttona masz na hover, a poniżej masz standardowo masz bootstrapowy button na click (który de facto pojawia się przy breakpoincie ponizej 768px).

Comments

Dziękuje za odpowiedź :)