Su "PRODOTTI" clicco verso l'alto di un div bianco (come mostrato in allegato). Quando in reattivo (mobile e tablet), vorrei chiudere automaticamente la barra di navigazione reattiva e mostrare solo la barra bianca.
Provai:
$('.btn-navbar').click();
provato anche:
$('.nav-collapse').toggle();
E funziona. Tuttavia, nelle dimensioni del desktop, viene anche chiamato e fa qualcosa di strano al menu in cui si restringe per un secondo.
Qualche idea?
Risposte:
Ce l'ho per lavorare con l'animazione!
Menu in html:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
Evento clic vincolante su tutti gli elementi nel menu di navigazione per comprimere (plug-in di compressione Bootstrap):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
EDIT Per renderlo più generico possiamo usare il seguente frammento di codice
$(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');
});
});
aelementi: devi solo chiamare$("#nav-main").collapse('hide');
Non è necessario aggiungere alcun javascript aggiuntivo a ciò che è già incluso con l'opzione di compressione dei bootstrap. Invece, includi semplicemente selettori di attivazione / disattivazione dei dati e di destinazione dei dati nelle voci dell'elenco di menu proprio come fai con il pulsante di attivazione / disattivazione della barra di navigazione. Quindi per la voce di menu Prodotti sarebbe simile a questo
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Quindi è necessario ripetere i selettori di commutazione dati e destinazione dati per ciascuna voce di menu
MODIFICARE!!! Per risolvere i problemi di overflow e lo sfarfallio in questa correzione, sto aggiungendo altro codice che risolverà questo problema e non ho ancora alcun javascript aggiuntivo. Ecco il nuovo codice:
<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>
Eccolo al lavoro http://jsfiddle.net/jaketaylor/84mqazgq/
Questo renderà i tuoi selettori di commutazione e di destinazione specifici per le dimensioni dello schermo ed eliminerà i difetti nel menu più grande. Se qualcuno ha ancora problemi con i glitch, fammelo sapere e troverò una soluzione. Grazie
EDIT : Nel bootstrap v4.1.3 non potevo usare classi visibili / nascoste. Invece di hidden-xsusare d-none d-sm-blocke invece di visible-xsusare d-block d-sm-none.
data-togglee data-targeta ogni elemento li, puoi invece aggiungerlo al genitore ulo ai divtag.
Penso che tu sia dappertutto ingegneria ..
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
MODIFICA: per occuparti dei sottomenu, assicurati che il loro ancoraggio di attivazione / disattivazione abbia la classe di attivazione / disattivazione a discesa su di esso.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
MODIFICA 2: aggiungi il supporto per il tocco del telefono.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
Mi è piaciuta molto l'idea di Jake Taylor di farlo senza JavaScript aggiuntivo e di sfruttare l'interruttore di compressione di Bootstrap. Ho scoperto che puoi risolvere il problema dello "sfarfallio" presente quando il menu non è in modalità compressa modificando data-targetleggermente il selettore per includere la inclasse. Quindi sembra così:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
Non l'ho testato con menu a discesa / menu annidati, quindi YMMV.
solo per essere completo, in Bootstrap 4.0.0-beta usando .show ha funzionato per me ...
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
Presumo che tu abbia una linea come questa che definisce l'area di navigazione, basata su esempi di Bootstrap e tutto il resto
<div class="nav-collapse collapse" >
Aggiungi semplicemente le proprietà come tali, come sul pulsante MENU
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
Ho anche aggiunto <body>, lavorato. Non posso dire di averlo profilato o altro, ma mi sembra un piacere ... finché non fai clic su un punto casuale dell'interfaccia utente per aprire il menu, quindi non così buono.
DK
Funziona, ma non si anima.
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
Nella HTML ho aggiunto una classe di nav-link al un tag di ogni link di navigazione.
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
questa soluzione ha un ottimo lavoro, su desktop e mobile.
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
Solo per precisare la soluzione di user1040259, aggiungi questo codice al tuo $ (document) .ready (function () {});
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
Come menzionato, questo non anima la mossa ... ma chiude la barra di navigazione sulla selezione degli elementi
Per coloro che utilizzano AngularJS e Angular UI Router con questo, ecco la mia soluzione (utilizzando l'interruttore di mollwe). Dove ".navbar-main-collapse" è il mio "data-target".
Crea direttiva:
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');
}
});
}
};
}]);
Direttiva sull'uso:
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
Questo dovrebbe fare il trucco.
Richiede bootstrap.js.
Esempio => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
Ha la stessa funzione dell'aggiunta degli attributi "data-toggle =" collapse "'e' href =" yournavigationID "'ai tag dei menu di navigazione.
Sto usando la funzione mollwe, anche se ho aggiunto 2 miglioramenti:
a) Evita la chiusura del menu a discesa se il link cliccato è compresso (inclusi altri link)
b) Nascondi anche il menu a discesa, se stai facendo clic sul contenuto web visibile.
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');
}
});
});
Non è il thread più recente, ma ho cercato una soluzione per lo stesso problema e ne ho trovata una (un mix di altri).
Ho dato il NavButton:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
un id / identificatore come:
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Non la migliore "idea" - ma: funziona per me! Ora puoi controllare la visibilità del tuo pulsante (con jquery) come:
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
(NOTA: questo è solo un codice snippato! Ho usato un evento "onclick" sui miei collegamenti di navigazione! (Avvio di una registrazione AJAX.)
Il risultato è: se il pulsante è "visibile" è stato "cliccato" ... Quindi: nessun bug se si utilizza la "visualizzazione a schermo intero" di Bootstrap (larghezza di oltre 940px).
Saluti Ralph
PS: funziona bene con IE9, IE10 e Firefox 25. Non ho controllato gli altri, ma non vedo alcun problema :-)
Questo ha funzionato per me. Ho fatto come, quando faccio clic sul pulsante del menu, sto aggiungendo o rimuovendo la classe "in" perché aggiungendo o rimuovendo quella classe l'interruttore funziona per impostazione predefinita. 'e.stopPropagation ()' serve a fermare l'animazione predefinita tramite bootstrap (immagino) puoi anche usare 'toggleClass' al posto di aggiungi o rimuovi classe.
$ ('# ChangeToggle'). On ('click', function (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
Se, ad esempio, la tua icona attivabile è visibile solo per dispositivi molto piccoli, potresti fare qualcosa del genere:
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
Facendo clic su [data-toggle = "offcanvas"] si aggiungerà il file .hidden-xs di bootstrap al mio # menu laterale che nasconderà il contenuto del menu laterale, ma diventerà nuovamente visibile se si aumenta la dimensione della finestra.
se il menu html è
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
sull'interruttore di navigazione la classe "in" viene aggiunta e rimossa dall'interruttore. controlla se il menu reattivo è aperto, quindi esegui l'interruttore di chiusura.
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
Tuggle Nav Close, risposta compatibile con browser IE, senza alcun errore della console. Se stai usando bootstrap, usa questo
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
$('.navbar-toggle').trigger('click');
Soluzione Bootstrap 4 senza Javascript
Aggiungi attributi data-toggle="collapse" data-target="#navbarSupportedContent.show" al div<div class="collapse navbar-collapse">
Assicurati di fornire il corretto idindata-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
.showè quello di evitare lo sfarfallio del menu a risoluzioni elevate
<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>