Bootstrap - menu nie chowa się po kliknięciu

Question

Witam ponownie

Mam problem z menu mobilnym które nie znika po kliknięciu w odnośnik i zasłania mi content. 

Kod:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar_collapse" >
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#"></a>
		</div>
		<div class="collapse navbar-collapse navbar_collapse">
			<ul class="nav navbar-nav">
				<li class="img-menu"><a href="#about_content"><img src="img/people.png"><br>&nbsp;&nbsp;O Mnie</a></li>
				<li class="img-menu"><a href="#skills_content"><img src="img/bars.png"><br>Umiejętności</a></li>
				<li class="img-menu"><a href="#projects_content"><img src="img/screen.png"><br>&nbsp;&nbsp;Portfolio</a></li>
			</ul>
		</div>
	

</nav>

Próbowałem rozwiązać to za pomocą JQuery ale coś nie wychodzi. Może mnie ktoś naprowadzić na rozwiązanie tego problemu ?

Answer 1

Przy użyciu jQuery funkcja toggle na odpowiednią classę i powinno być okej. Pokaż swój kod jQuery jak możesz :)

Comments

Problem rozwiązałem takim kodem:

$(document).ready(function(){
  $('.navbar-nav').click(function () {
	$('.navbar-collapse').attr('aria-expanded', 'false').removeClass('in');
  });
});

Pytanie czy jest to dobre rozwiązanie? Może da się to zrobić lepiej?

---

Nie lepiej za pomocą właśnie toggle tak jak Ci pisałem? Dodaj i odejmuje classę automatycznie. Jak masz menu to musi Ci coś pierw je otworzyć, a w Twoim kodzie widzę tylko usunięcie classy bez jej ewentualnego dodania po kliknięciu na "hamburgera".

 

Taki urwany kod bez niczego trudno ocenić, dobrze by było jakbyś wrzucił to chociaż na jakiś poglądowy hosting :)

---

Po kliknięciu w hamburgera i otwarciu menu klasa "in" tworzy się automatycznie.

Próbowałem przez toggle jak radziłeś tylko czegoś mi brakuje. Menu się chowa, ale już drugi raz się nie otwiera.

$(document).ready(function(){
  $('.navbar-nav').click(function () {
	$('.navbar-collapse').toggle();
  });
});

 

---

Nie masz przypisanego jaką funkcję ma dodawać i usuwać :) W toggle () musisz dodać classę ;)

 

Ja mam przykładowo tak zrobione dla swojej strony:

 

 

var navigationIcon = document.querySelector(".navigation-icon");
navigationIcon.addEventListener("click", function () {
    document.querySelector(".page-header").classList.toggle("nav-opened");
}, false);

 

---

Coś nie działa, albo jestem za głupi. Dodałem do toggle klasę "in". Niby w podglądzie kodu zmienia się wszystko tak jak powinno, ale po kliknięciu w odnośnik menu znika i dodaje się automatycznie "style="display: 'none' " i tak już zostaje. Menu ponownie się nie otwiera.

---

Czyli coś innego musi dodawać tę classę. Dlatego lepiej takie skrypty robić samemu, jeżeli nie używa się całego bootstrapa ;)

---

Zostawię moją wersję skryptu, działa i jest ok. Dzięki za zainteresowanie i porady 

Łap + 

Answer 2

Dołączyłeś jquery.js i bootstrap.js ? Swojego kodu nie trzeba pisać.

Comments

Tak, oba dołączone i działają.