Modyfikacja skryptu JS z tutoriala p. Zelenta

Question

Cześć,
w 2 odcinku z bootstrapa p. Zelent pokazywał sposób na rozwijanie submenu nie poprzez kliknięcie a poprzez najechanie na pozycję w menu.

Załączył do tego odcinka skrypt, dzięki któremu submenu w ogóle nie reaguje na kliknięcie, jedynie na najechanie kursorem. Jest mi ktoś w stanie podpowiedzieć jak przerobić ten skrypt, żeby działał on tylko dla danej rozdzielczości ekranu? Chodzi o to że w telefonie chcę ustawić rozwijanie się submenu właśnie poprzez usunięte tym skryptem kliknięcie.

<script>

		$( document ).ready( function () {
			$( '.dropdown' ).on( 'click', function ( e ) {
				var $el = $( this );
				var $parent = $( this ).offsetParent( ".dropdown-menu" );
				if ( !$( this ).next().hasClass( 'show' ) ) {
					$( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
				}
				var $subMenu = $( this ).next( ".dropdown-menu" );
				$subMenu.toggleClass( 'show' );

				$( this ).parent( "li" ).toggleClass( 'show' );

				$( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
					$( '.dropdown-menu .show' ).removeClass( "show" );
				} );

				 if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
					$el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
				}

				return false;
			} );
		} );

	</script>

 

Answer 1

Użyj globalnej metody matchMedia, która zwraca obiekt MediaQueryList z informacją, czy strona spełnia media query przekazane w parametrze. Jeśli chcesz na bieżąco śledzić zmiany rozdzielczości ekranu, to podepnij się na event change na tym obiekcie.