"ÜRÜNLER" bölümünde beyaz bir div (ekte görüldüğü gibi) yukarı kaydırıyorum'u tıklayın. Duyarlı moddayken (mobil ve tablet), duyarlı gezinme çubuğunu otomatik olarak kapatmak ve yalnızca beyaz çubuğu göstermek istiyorum.
Denedim:
$('.btn-navbar').click();
ayrıca denedi:
$('.nav-collapse').toggle();
Ve işe yarıyor. Bununla birlikte, masaüstü boyutunda, bir saniye küçüldüğü menüye de denir ve garip bir şey yapar.
Herhangi bir fikir?
Yanıtlar:
Onu animasyonla çalıştırdım!
Html'de menü:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
Tıklama olayını gezinme menüsündeki tüm öğelere bağlama menüsünü daraltma (Bootstrap daraltma eklentisi):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
DÜZENLE Daha genel hale getirmek için aşağıdaki kod parçacığını kullanabiliriz
$(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');
});
});
aunsurlar değilse : aramanız yeterlidir$("#nav-main").collapse('hide');
Önyükleme daraltma seçeneğinde zaten bulunanlara fazladan javascript eklemeniz gerekmez. Bunun yerine, gezinme çubuğu geçiş düğmenizle yaptığınız gibi, menü listesi öğelerinize veri geçişi ve veri hedefi seçicilerini dahil etmeniz yeterlidir. Dolayısıyla, Ürünler menü öğeniz için şöyle görünür
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Daha sonra, her menü öğesi için veri geçişi ve veri hedefi seçicilerini tekrarlamanız gerekir.
DÜZENLE!!! Bu düzeltmede taşma sorunlarını ve titremeyi düzeltmek için, bunu düzeltecek ve hala fazladan javascript içermeyen bazı kodlar ekliyorum. İşte yeni 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>
İşte işte http://jsfiddle.net/jaketaylor/84mqazgq/
Bu, geçiş ve hedef seçicilerinizi ekran boyutuna özgü hale getirecek ve daha büyük menüdeki hataları ortadan kaldıracaktır. Hala sorun yaşayan biri varsa lütfen bana bildirin, bir düzeltme bulacağım. Teşekkürler
DÜZENLEME : Bootstrap v4.1.3'te görünür / gizli sınıfları kullanamadım. Yerine hidden-xskullanımı d-none d-sm-blockve yerine visible-xskullanılması d-block d-sm-none.
data-toggleve data-targether li elemana özelliklerini yerine ebeveyne ekleyebilirsiniz ulveya divetiketleri.
Sanırım her yerde mühendisliğin var ..
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
DÜZENLEME: Alt menülerle ilgilenmek için, geçiş bağlantılarının üzerinde açılır-geçiş sınıfının bulunduğundan emin olun.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
DÜZENLEME 2: Telefon dokunuşu için destek ekleyin.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
Jake Taylor'ın bunu ek JavaScript olmadan yapma ve Bootstrap'in daraltma geçişinden yararlanma fikrini gerçekten beğendim. Sınıfı data-targetdahil etmek için seçiciyi biraz değiştirerek menü daraltılmış modda olmadığında ortaya çıkan "titreme" sorununu çözebileceğinizi öğrendim in. Yani şuna benziyor:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
İç içe açılır menülerle test etmedim, bu yüzden YMMV.
Bootstrap örneklerine ve tüm
<div class="nav-collapse collapse" >
MENÜ düğmesindeki gibi özellikleri eklemeniz yeterlidir
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
Ekledim <body> , çalıştım. Profilimi oluşturduğumu söyleyemem, ama bana bir zevk gibi görünüyor ... menüyü açmak için kullanıcı arayüzünün rastgele bir noktasına tıklayana kadar, o kadar iyi değil.
DK
Bu çalışır, ancak canlandırmaz.
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
HTML'ye bir sınıf ekledim nav-link için bir her navigasyon bağlantısının etiketi.
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
bu çözümün masaüstü ve mobil cihazlarda iyi çalışması var.
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
Sadece user1040259'un çözümünü hecelemek için, bu kodu $ (document) .ready (function () {});
$('.nav').click( function() {
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
});
Bahsettikleri gibi, bu hareketi hareketlendirmiyor ... ancak öğe seçiminde gezinme çubuğunu kapatıyor
Bununla AngularJS ve Angular UI Router kullananlar için, işte benim çözümüm (mollwe'nin geçişini kullanarak). ".Navbar-main-collapse" benim "veri hedefim" dir.
Direktif oluştur:
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');
}
});
}
};
}]);
Kullanım Yönergesi:
<div class="collapse navbar-collapse navbar-main-collapse">
<your menu>
Bu hile yapmalı.
Bootstrap.js gerektirir.
Örnek => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
Bu, gezinme menüleri etiketlerine 'data-toggle = "collapse"' ve 'href = "yournavigationID"' özelliklerini eklemekle aynı işlevi görür.
2 iyileştirme eklememe rağmen mollwe işlevini kullanıyorum:
a) Tıklanan bağlantı daraltılmışsa (diğer bağlantılar dahil) açılır menüyü kapatmayın
b) Görünen web içeriğine tıklıyorsanız, açılır menüyü de gizleyin.
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');
}
});
});
En yeni iş parçacığı değil ama aynı Problem için bir çözüm aradım ve bir tane buldum (diğerlerinin bir karışımı).
NavButton'ı verdim:
<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...
gibi bir kimlik / Tanımlayıcı:
<button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
En iyi "Fikir" değil - ama: Benim için çalışıyor! Artık düğmenizin görünürlüğünü (jquery ile) şu şekilde kontrol edebilirsiniz:
var target = $('#navcop');
if(target.is(":visible")){
$('#navcop').click();
}
(NOT: Bu sadece bir Kod alınmış! Nav Bağlantılarımda bir "onclick" Olayı kullandım! (Bir AJAX Kaydı Başlatmak.)
Sonuç şudur: Düğme "görünür" ise "tıklanır" ... Öyleyse: Bootstrap'in "Tam Ekran görünümünü" kullanırsanız (940 pikselin üzerinde genişlik) Hata Yok.
Selamlar Ralph
Not: IE9, IE10 ve Firefox 25 ile sorunsuz çalışıyor. Başkalarını kontrol etmedim - Ama bir Sorun göremiyorum :-)
Bu benim için çalıştı. Menü düğmesine tıkladığımda, 'in' sınıfını ekleyip kaldırıyorum çünkü bu sınıfı ekleyerek veya kaldırarak geçiş varsayılan olarak çalışıyor. 'e.stopPropagation ()' önyükleme ile varsayılan animasyonu durdurmaktır (sanırım) sınıf ekleme veya kaldırma yerine 'toggleClass' da kullanabilirsiniz.
$ ('# ChangeToggle']. On ('click', function (e) {
if ($('.navbar-collapse').hasClass('in')) {
$('.navbar-collapse').removeClass('in');
e.stopPropagation();
} else {
$('.navbar-collapse').addClass('in');
$('.navbar-collapse').collapse();
}
});
Örneğin, değiştirilebilir simgeniz yalnızca çok küçük cihazlar için görünüyorsa, bunun gibi bir şey yapabilirsiniz:
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
[Data-toggle = "offcanvas"] 'a tıklamak, önyükleme'nin .hidden-x'lerini # yan menüye ekleyecek ve bu yan menü içeriğini gizleyecek, ancak pencere boyutunu büyütürseniz yeniden görünür hale gelecektir.
menü html ise
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
on nav toggle 'in' sınıfı eklenir ve geçişten kaldırılır. duyarlı menünün açılıp açılmadığını kontrol edin ve ardından kapat geçişini gerçekleştirin.
$('.nav-collapse .nav a').on('click', function(){
if ( $( '.nav-collapse' ).hasClass('in') ) {
$('.navbar-toggle').click();
}
});
Tuggle Nav Close, IE tarayıcı uyumlu yanıt, herhangi bir konsol hatası olmadan. Bootstrap kullanıyorsanız, bunu kullanın
$('.nav li a').on('click', function () {
if ($("#navbar").hasClass("in")) {
$('.navbar-collapse.in').show();
}
else {
$('.navbar-collapse.in').hide();
}
})
Herhangi bir Javascript içermeyen Bootstrap 4 çözümü
Özellikler ekleyin data-toggle="collapse" data-target="#navbarSupportedContent.show" div'e<div class="collapse navbar-collapse">
Doğru idgirişi sağladığınızdan emin olun .data-target
<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
.showbüyük çözünürlüklerde menü titremesini önlemek içindir
<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>