Po kliknięciu „PRODUKTY” przesuwam w górę biały div (jak widać na załączonym). W responsywnym (mobilnym i tablecie) chciałbym automatycznie zamknąć responsywny pasek nawigacyjny i pokazywać tylko biały pasek.
Próbowałem:
$('.btn-navbar').click();
również próbował:
$('.nav-collapse').toggle();
I to działa. Jednak w rozmiarze pulpitu jest również nazywany i robi coś dziwnego w menu, w którym kurczy się na sekundę.
Jakieś pomysły?
Odpowiedzi:
Mam to do pracy z animacją!
Menu w html:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
Zdarzenie kliknięcia powiązania na wszystkich elementach w nawigacji do menu zwijania (wtyczka zwijania Bootstrap):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
EDYCJA Aby uczynić go bardziej ogólnym, możemy użyć następującego fragmentu kodu
$(function(){
var navMain = $(".navbar-collapse"); // avoid dependency on #id
// "a:not([data-toggle])" - to avoid issues caused
// when you have dropdown inside navbar
navMain.on("click", "a:not([data-toggle])", null, function () {
navMain.collapse('hide');
});
});
aelementy: wystarczy zadzwonić$("#nav-main").collapse('hide');
Nie musisz dodawać żadnego dodatkowego javascript do tego, co jest już zawarte w opcji zwijania bootstraps. Zamiast tego po prostu umieść selektory przełączania danych i celów danych na elementach listy menu, tak jak robisz to z przyciskiem przełączania paska nawigacyjnego. Tak więc w przypadku pozycji menu Produkty wyglądałoby to tak
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Następnie należałoby powtórzyć selektory przełączania danych i celu danych dla każdego elementu menu
EDYTOWAĆ!!! Aby naprawić problemy z przepełnieniem i migotaniem tej poprawki, dodaję więcej kodu, który to naprawi i nadal nie będzie mieć żadnego dodatkowego javascript. Oto nowy kod:
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Tutaj jest w pracy http://jsfiddle.net/jaketaylor/84mqazgq/
Spowoduje to, że przełączniki i selektory docelowe będą dostosowane do rozmiaru ekranu i wyeliminują usterki w większym menu. Jeśli ktoś nadal ma problemy z usterkami, daj mi znać, a znajdę rozwiązanie. Dzięki
EDYCJA : W bootstrap v4.1.3 nie mogłem używać widocznych / ukrytych klas. Zamiast hidden-xsużywać d-none d-sm-blocki zamiast visible-xsużywać d-block d-sm-none.
data-togglei data-targetdo każdego elementu li, możesz zamiast tego dodać go do elementu nadrzędnego ullub divznaczników.
Myślę, że zajmujesz się inżynierią ...
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
EDYCJA: Aby zadbać o podmenu, upewnij się, że ich kotwica przełączania ma na sobie klasę przełączania rozwijanego.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
EDYCJA 2: Dodaj obsługę dotyku telefonu.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
Bardzo podobał mi się pomysł Jake'a Taylora, aby zrobić to bez dodatkowego JavaScript i wykorzystać przełącznik zwijania Bootstrapa. Zauważyłem, że możesz rozwiązać problem „migotania” występujący, gdy menu nie jest zwinięte data-target, nieznacznie modyfikując selektor, aby uwzględnić inklasę. Więc wygląda to tak:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
Nie testowałem tego z zagnieżdżonymi listami rozwijanymi / menu, więc YMMV.
żeby być kompletnym, w Bootstrap 4.0.0-beta użycie .show działało dla mnie ...
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
Zakładam, że masz taką linię definiującą obszar nawigacyjny, opartą na przykładach Bootstrap i wszystkim
<div class="nav-collapse collapse" >
Po prostu dodaj właściwości jako takie, jak na przycisku MENU
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
Dodałem do <body> też, działało. Nie mogę powiedzieć, że sprofilowałem to czy coś, ale wydaje mi się to przyjemnością ... dopóki nie klikniesz losowego miejsca w interfejsie użytkownika, aby otworzyć menu, więc nie tak dobrze.
DK
To działa, ale nie ożywia.
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
W HTML dodałem klasę nav-link do tagu a każdego linku nawigacyjnego.
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
to rozwiązanie ma dobrą pracę, na komputerach stacjonarnych i urządzeniach mobilnych.
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
Aby przeliterować rozwiązanie user1040259, dodaj ten kod do swojego $ (document) .ready (function () {});
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
Jak wspominają, to nie animuje ruchu ... ale zamyka pasek nawigacyjny przy wyborze przedmiotu
Dla tych, którzy używają AngularJS i Angular UI Router z tym, oto moje rozwiązanie (używając przełącznika mollwe). Gdzie „.navbar-main-collapse” to mój „cel danych”.
Utwórz dyrektywę:
module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
return {
restrict: 'C',
link: function (scope, element) {
//watch for state/route change (Angular UI Router specific)
$rootScope.$on('$stateChangeSuccess', function () {
if (!element.hasClass('collapse')) {
element.collapse('hide');
}
});
}
};
}]);
Dyrektywa użytkowania:
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
To powinno załatwić sprawę.
Wymaga bootstrap.js.
Przykład => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
Działa to tak samo, jak dodanie atrybutów „data-toggle =" collapse "” i „href =" yournavigationID "” do tagów menu nawigacji.
Używam funkcji mollwe, chociaż dodałem 2 ulepszenia:
a) Unikaj zamykania listy rozwijanej, jeśli kliknięty link jest zwinięty (w tym inne linki)
b) Ukryj również listę rozwijaną, jeśli klikasz widoczną treść internetową.
jQuery.fn.exists = function() {
return this.length > 0;
}
$(function() {
var navMain = $(".navbar-collapse");
navMain.on("click", "a", null, function() {
if ($(this).attr("href") !== "#") {
navMain.collapse('hide');
}
});
$("#content").bind("click", function() {
if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
navMain.collapse('hide');
}
});
});
Nie jest to najnowszy wątek, ale szukałem rozwiązania tego samego problemu i znalazłem jeden (mieszankę kilku innych).
Podałem NavButton:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
identyfikator / identyfikator, taki jak:
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Nie jest to najlepszy „pomysł” - ale: dla mnie działa! Teraz możesz sprawdzić widoczność swojego przycisku (za pomocą jQuery) na przykład:
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
(UWAGA: to tylko fragment kodu! Użyłem zdarzenia „onclick” na moich łączach nawigacyjnych! (Rozpoczynanie procedury AJAX).
Rezultat jest następujący: jeśli przycisk jest „widoczny”, został „kliknięty” ... Więc: nie ma błędu, jeśli używasz „widoku pełnoekranowego” programu Bootstrap (szerokość ponad 940 pikseli).
Pozdrowienia Ralph
PS: Działa dobrze z IE9, IE10 i Firefox 25. Nie sprawdzałem innych - ale nie widzę problemu :-)
To zadziałało dla mnie. Zrobiłem tak, kiedy klikam przycisk menu, dodając lub usuwając klasę „w”, ponieważ dodając lub usuwając tę klasę, przełącznik działa domyślnie. 'e.stopPropagation ()' polega na zatrzymaniu domyślnej animacji przez bootstrap (tak sądzę), możesz także użyć 'toggleClass' zamiast dodawania lub usuwania klasy.
$ ('# ChangeToggle'). On ('click', function (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
Jeśli na przykład ikona z możliwością przełączania jest widoczna tylko dla bardzo małych urządzeń, możesz zrobić coś takiego:
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
Kliknięcie [data-toggle = "offcanvas"] doda plik .hidden-xs programu bootstrap do mojego # menu bocznego, które ukryje zawartość menu bocznego, ale stanie się ponownie widoczne, jeśli zwiększysz rozmiar okna.
jeśli menu html to
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
on nav toggle Klasa „in” jest dodawana i usuwana z przełącznika. sprawdź, czy responsywne menu jest otwarte, a następnie wykonaj przełącznik zamykania.
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
Tuggle Nav Close, odpowiedź zgodna z przeglądarką IE, bez błędu konsoli. Jeśli używasz bootstrap, użyj tego
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
$('.navbar-toggle').trigger('click');
Rozwiązanie Bootstrap 4 bez Javascript
Dodaj atrybuty data-toggle="collapse" data-target="#navbarSupportedContent.show" do div<div class="collapse navbar-collapse">
Upewnij się, że zapewniają prawidłowe idindata-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
.showma na celu uniknięcie migotania menu w dużych rozdzielczościach
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>