[jQuery][Bootstrap] Skrypt nie działa po zmianie rozmiaru okna

Dla specjalistów Webmastering
#1

Robię stronę przy użyciu bootstrap i znalazłem na stackoverflow skrypt, żeby dropdown się animował podczas rozwijania i zwijania (mogę zrobić to w css, ale chcę mieć też awaryjnie w js). Niestety po pierwszej zmianie rozmiaru okna, niezależnie czy jego rozmiar jest powyżej, czy poniżej 768px, skrypt przestaje działać. Nie znam się na javascript więc czy możecie mi powiedzieć, gdzie jest błąd?

$(document).ready(function() {
	// This will fire when document is ready:
	$(window).resize(function() {
		// This will fire each time the window is resized:
		if($(window).width() >= 768) {
			// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
			$('.dropdown').on('show.bs.dropdown', function(e){
				$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
			});
			// ADD SLIDEUP ANIMATION TO DROPDOWN //
			$('.dropdown').on('hide.bs.dropdown', function(e){
				e.preventDefault();
				$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
					//On Complete, we reset all active dropdown classes and attributes
					//This fixes the visual bug associated with the open class being removed too fast
					$('.dropdown').removeClass('open');
					$('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
				});
			});
		}
	}).resize(); // This will simulate a resize to trigger the initial run.
});

<nav class="navbar" role="navigation">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed" 
		 data-toggle="collapse" data-target="#top-navigation-collapse">
		 <span class="glyphicon glyphicon-menu-hamburger"></span>
	  </button>
	</div>
	<div class="collapse navbar-collapse" id="top-navigation-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Link
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
			</li>	
		</ul>
	</div>
</nav>
#2

Podeślij linka.

#3

Link do postu na stackoverflow? Tutaj

Sam fragment który uruchamia skrypt w zależności od rozmiaru okna znalazłem gdzieś indziej

$(document).ready(function() {
	// This will fire when document is ready:
	$(window).resize(function() {
		// This will fire each time the window is resized:
		if($(window).width() >= 768) {
		}
	}).resize(); // This will simulate a resize to trigger the initial run.
});

Po odświeżeniu okna działa, zmienię rozmiar okna o chociaż pixel - przestaje działać. Chcę, żeby to działało dynamicznie podczas skalowania okna, coś jak @media (min-width: 768px) w css.

#4

Nie widzę sensu dodawać tych zdarzeń w zdarzeniu resize(), które nie występuje jednokrotnie.

Proponuję dać ten kod tylko w ready z warunkiem window.width. Czyli cos jak to:

$(function() {
  // Handler for .ready() called.
  // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
  $('.dropdown').on('show.bs.dropdown', function(e){
    if($(window).width() < 768) return;
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // ADD SLIDEUP ANIMATION TO DROPDOWN //
  $('.dropdown').on('hide.bs.dropdown', function(e){
    if($(window).width() < 768) return;
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });
});

Ale tak na serio - to animację jednak lepiej jest stworzyć w CSSach - wykorzystaj odpowiednie prefixy i powinno działać pod każdą przeglądarką. Nie potrzebujesz do tego backup-planu w postaci JS. Co za dużo to niezdrowo!

#5

Chodzi Ci o samą animację wysuwania boxu po kliknięciu w link? Przecież to można o wiele szybciej zrobić za pomocą zwykłego, nie-bootstrapowego jquery i jest o tyle wygodne, że nie trzeba się trzymać tego schematu kodu dot. nawigacji.

http://api.jquery.com/slidetoggle/