Tıklandığında Twitter Bootstrap nav çöküşünü gizle


133

Bu bir alt menü açılır listesi değildir, kategori resimdeki gibi li sınıfıdır:

resim açıklamasını buraya girin

Duyarlı menüden bir kategori seçerek (şablon yalnızca bir sayfadır), tıkladığınızda nav daralmasını otomatik olarak gizlemek istiyorum. Şablonda yalnızca bir sayfa olduğundan gezinme olarak kullanmak için de gezinin. Onu etkilemeyen bir çözüm arıyorum, işte menünün HTML kodu:

    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Carousel Demo</a>
      <div class="nav-collapse">
        <ul class="nav" >
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <!-- dropdown -->
        </ul>
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

ve benim çözümüm çalışıyor mu değil mi?
WooCaSh

@WooCaSh Çalıştırmak yerine onların çözüm custom.js yanlış sipariş, $ ('nav a') fark ettim. On ( 'click' function () {ve benim durumumda o zaman $, bir sınıfı () üzerine ( 'click 'function () {Eğer bana çok yardımcı, teşekkürler' nav a.'..!
Tim Vitor


Tüm bu çözümleri burada kendiniz denemek ve karşılaştırmak istemiyorsanız, yapmanız gereken bu yanıttan 1 numarayı düzenleyin .
gak

Cevabımı burada görebilirsiniz stackoverflow.com/questions/14248194/…
Deve

Yanıtlar:


165

bunu dene:

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
    $('.navbar-toggler').click(); //bootstrap 4.x
});

1
Bu harika çalıştı. Teşekkürler WooCaSh. Ayrıca bir "." $ ('nav a') => $ ('. nav a') öncesi koda. [Sınıf seçicide bir nokta eksikti. ”]
Clain Dsilva

7
Bilginize, bu her durumda çalışmaz. Pencere yeniden boyutlandırılırsa ve mobil menüyü getirirse, varsayılan olarak açık olacaktır.
Andrew Boes

8
GÜNCELLEME: Bootstrap 3 için genel seçici .navbar-toggle, yani $ (". Navbar-toggle"). Click ();
Richard

41
Bu, gezinme çubuğunda sorunlara neden oluyor. $ ('. Nav-collapse') kullanmak daha iyidir. Collapse ('hide'); açma / kapatma düğmesini tıklamak yerine tıklama etkinliğinde.
Rohan

7
Gezinme çubuğu "masaüstü" modunda açıldığında titreşir veya kapanır ve bunu kullanırken yeniden açılır.
mlapaglia

134

Sadece 2 özniteliğini btn-navbardata-toggle="collapse" data-target=".nav-collapse.in" bu gibi her bağlantıda ( ) :

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
  </ul>
</div>

In Bootstrap 4 Navbar'daki , indeğişti showsözdizimi olacaktır böylece:

data-toggle="collapse" data-target=".navbar-collapse.show"


13
<li> öğesine data-toggleve eklemek data-targettemiz bir çözümdür. Teşekkürler.
trante

9
Mobil cihazlarda iyi çalışır, ancak masaüstünde navbar çökme animasyonuna da neden olur, bu istenmeyen bir durumdur.
James Brewer

34
@JamesBrewer Masaüstü sürümünde daralma animasyonunu önlemek için .inveri hedefine ekleyin :data-toggle="collapse" data-target=".nav-collapse.in"
Daghall

23
Bootstrap 3 için .nav-collapse'i .navbar-collapse ile değiştirmeyi unutmayın
kuceram

3
Bu kabul edilen cevap olmalı! Gönderdiğiniz için teşekkür ederiz!
trixtur

60
$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});

6
Bu daha iyi bir çözümdür, çünkü bağlantılar göründüğünde bir aksaklığı önler.
Bruno Dias

Bootstrap 4'te öyle .navbar-toggler. Neyse, süper çalışma kodu, teşekkürler!
Xdg

45

Varsayılan collapse.js yöntemlerini kullanmak daha iyidir ( V3 belgeleri , V4 belgeleri ):

$('.nav a').click(function(){
    $('.nav-collapse').collapse('hide');
});

4
Tıklama işlevlerini kullanmaktan kesinlikle daha iyi! Yalnızca değiştirmek istediğiniz şeylerle etkileşime girerek riski minimumda tutmak en iyisidir. Bir click olayı, istenmeyen ek işlevlerin yürütülmesine neden olabilir. Bu çöküş yöntemini bilmiyordum, teşekkürler.
Andrew

1
Bu şimdiye kadar bulduğum en iyi çözüm. Teşekkür ederim. Yaptığım sadece küçük bir gelişme: .nav aSeçiciyi .nav a:not(.dropdown-toggle)
bununla

Benim için, bootstrap 4 örnek sayfam yerine .nav akullanmak zorunda kaldım.navbar a
alexandre1985

Yani demek .navbar-collapseistemiyorsun değil .nav-collapsemi?
Volomike

Hayır, bilmiyorum, çünkü .nav-collapsesoru kodu örneğinde kullanıldı.
Vadim P.

32

Yinelenen kod yalamak olmadan daha da zarif , nav kendisi data-toggle="collapse"ve data-target=".nav-collapse"öznitelikleri basitçe uygulamaktır :

<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
  <ul class="nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Süper temiz, JavaScript gerekmez. nav aÖğeleriniz şişman parmaklar için yeterince bol dolguya sahip e.stopPropagation()olduğu ve kullanıcılar nav aöğelere tıkladıklarında tıklama olayının köpürmesini engellemediğiniz sürece harika çalışır .


1
Bu davranışı gerçekleştirmenin uygun önyükleme yolu budur.
apenasVB

2
Ben dahil etmek hedefini değiştirerek öneririm içinde sınıfın yanı. Bu, masaüstü sürümlerinin garip davranmasını önleyecektir. data-target=".nav-collapse.in"
Dave

Bu konuda güzel bir şey, açısal 4'ün routerLink ile çalışırken diğer çözümler çalışmıyor!
stt106

1
Bootstrap 4'te olurdu<div class="collapse navbar-collapse" data-toggle="collapse" data-target=".navbar-collapse">
JoshJoe

17

Güncelleyin

<li>
  <a href="#about">About</a>
</li>

için

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

Bu basit değişiklik benim için çalıştı.

Ref: https://github.com/twbs/bootstrap/issues/9013


1
Bu kabul edilen cevap olmalı. Standart önyükleme kurallarıyla mükemmel çalışır.
Bradley

1
Kabul. Bunu başarmanın doğru yolu budur. JQuery'ye gerek yok. Bunun neden bu kadar az oy aldığını / dikkatini çektiğini anlamıyorum.
wahwahwah

"Standart" bir Visual Studio kalıp sayfasında, burger menüsü kaybolur ve menü seçeneği olmaz. Bu yanıt yalnızca belirli bir menü yapılandırma düzeniyle çalışır (örnek olarak sağlamazsınız).
Gone Coding

1
Bu artık işe yaramaz. data-target=".navbar-collapse.in"yeni bootstrap standardında olduğu gibi kullanın . .inSınıf animasyon önlemektir zaman masaüstünde
philip oghenerobo Balogun

Bu çözümü benim durumumda kullandım, ancak parametre div.navbar-collapseolarak öğemin kimliğini kullandım data-target.
maxathousand

13

Kullanıcı yalnızca gezinme öğelerini değil, gövdenin herhangi bir yerini tıkladığında gezinme kapatılmalıdır. Diyelim menüsü açık, ancak kullanıcı sayfa gövdesini tıklıyor. Kullanıcı menünün kapatılmasını bekler.

Ayrıca, geçiş düğmesinin görünür olduğundan emin olmalısınız, aksi takdirde menüde bir atlama görülür.

$(document).ready(function() { 

$("body").click(function(event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});

Msgstr "Öğeler belgede boşluk tüketiyorlarsa görünür kabul edilir." Navbar-collapse ekranda görünmüyor, ancak görünmüyorsa kodunuz çökmeyi önlemek içindir.
Steve M

Sadece harika değil, aynı zamanda benim için çalışan tek çözüm, bootstrap> 3
AME

13

Bootstrap 3.3.6 üzerinde test edildi - iş!

$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});


7

Bunu deneyin> Bootstrap 3

Ne aradığımı parlak, ancak ben javascript ve bootstrap modal ile bazı çatışmalar vardı, bu düzeltildi.

    $(function() {
    $('.navbar-nav').on('click', function(){ 
        if($('.navbar-header .navbar-toggle').css('display') !='none'){
            $(".navbar-header .navbar-toggle").trigger( "click" );
        }
    });
});

Bu yardımcı olur umarım.


6

Bu benim için iyi çalıştı. Kabul edilen yanıtla aynıdır, ancak masaüstü / tablet görünümüyle ilgili sorunu düzeltir

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth <= 768) {
            $(".navbar-toggle").click();
        }
    });


window.innerWidth <= 767 iyidir;) veya window.innerWidth <768
Alex Tape

Bu en iyi yanıt olarak seçilmelidir. Ancak, bu, açılır menülerle çalışmaz. Seçiciyi $ ('. Navbar-nav') ile değiştirerek
çözdüm. Find

6

$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});


Bu benim için çalışıyor. Her kendo görünümünde bir gezinti çubuğum var, bu yüzden onları beforeShowolayda kapatmam gerekiyor .
xinthose

4

Aşağıda gösterildiği gibi gizlemek istediğiniz daraltılabilir öğe olarak varsayılan Bootstrap 3'ün collapse.js yöntemlerini kullanmak daha iyi olduğunu düşünüyorum .navbar-collapse.

Diğer çözümler, web sayfanızda öğelerin görüntülenme veya çalışma biçiminde istenmeyen başka sorunlara neden olabilir. Bu nedenle, ilk sorununuzu gidermek için bazı çözümler görünebilir, ancak diğerlerini çok iyi tanıtabilir, bu nedenle herhangi bir düzeltmeden sonra sitenizi kapsamlı bir şekilde test ettiğinizden emin olun.

Bu kodu çalışırken görmek için:

  1. Aşağıdaki "Bu Kod Parçacığını Çalıştır" a basın.
  2. "Tam Sayfa" düğmesine basın.
  3. Açılır menü etkinleşene kadar pencereyi ölçeklendirin.
  4. Sonra bir menü seçeneği ve voila!

Şerefe!


Bu şu anda kabul edilen cevaptan çok daha iyi. Bununla, masaüstünde hayalet animasyonları alıyorum.
Cody

3

Her açılan bağlantıya, data-toggle = "collapse" ve data-target = ". Nav-collapse" ifadelerini girin; burada nav-collapse, açılır listeye verdiğiniz addır.

<ul class="nav" >
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
      <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
      <li><a href="#services" data-toggle="collapse" data-target="nav-collapse">Services</a></li>
      <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
      <!-- dropdown -->
  </ul>

Bu, mobil ekranlar gibi bir açılır listeye sahip olan ekranda mükemmel bir şekilde çalışıyor, ancak masaüstü ve tablette bir flickr oluşturuyor. Bunun nedeni .collapsing sınıfının uygulanmasıdır. Flickr'ı kaldırmak için bir medya sorgusu oluşturdum ve çöken sınıfa gizlenen taşma ekledim.

@media (min-width: 768px) {
.collapsing {
    overflow: inherit;
  }
}

3

Data-toggle = "collapse" data-target = ". Navbar-collapse.in" etiketini <a>benim için çalıştı.

<div>

        <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>
            <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item"><a
                    href="#" data-toggle="collapse" data-target=".navbar-collapse.in" class="nav-link" >Home
                </a></li>
            </ul>
    </div>

2

İşte böyle yaptım. Daha pürüzsüz bir yol varsa, lütfen bana söyle.

İçinde <a>menü için bağlantılar Bu kodu eklenmiş olan etiketler:

onclick="$('.navbar-toggle').click()"

Slayt animasyonunu korur. Yani tam kullanımda şöyle görünecektir:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="topNavController as topNav">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="home.html">My Cool Site</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active" onclick="$('.navbar-toggle').click()"><a href="home.html" onclick="$('.navbar-toggle').click()"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="aboutus.html" onclick="$('.navbar-toggle').click()">About Us</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>


1
$(function() {
    $('.nav a').on('click touchstart', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

// NOT Mobil dokunuş için "touchstart" ı ekledim. touchstart / end'de gecikme yok


1

Bu benim kullandığım en iyi çözüm.

$(document).ready(function () {

        $('.nav a').on('click', function () {

            if ($(".btn-navbar").is(":visible") ){ $(".btn-navbar").trigger("click"); } //bootstrap 2.x
            if ($(".navbar-toggle").is(":visible")) { $(".navbar-toggle").trigger("click"); } //bootstrap 3.x
        });

    });

1

Bu çözümü kullanırken masaüstü gezinme çubuklarının titreştiğini fark edenler için:

$('.nav a').on('click', function(){
    $(".navbar-collapse").collapse('hide');
}); 

Bu soruna basit bir çözüm, sadece 'in' varlığını kontrol ederek daraltılmış navbar'a başvurmaktır:

$('.navbar-collapse .nav a').on('click', function(){
    if($('.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

Bu, gezinme çubuğu mobil moddayken tıklandığında gezinme çubuğunu daraltır, ancak masaüstü sürümünü yalnız bırakacaktır. Bu, birçok insanın masaüstü sürümlerinde meydana geldiğine dair titremeyi önler.

Ayrıca, açılır menülere sahip bir gezinme çubuğunuz varsa bunları göremezsiniz çünkü gezinme çubuğu üzerlerine tıklar tıklamaz gizlenecektir, bu nedenle açılır menüler varsa (benim gibi!), Aşağıdakileri kullanın:

$('.nav a').on('click', function(e){
    if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

Bu, DOM'da tıklanan bağlantının üzerindeki açılır sınıfın varlığını arar, varsa, bağlantı bir açılır menü başlatmak istiyordu ve sonuç olarak menü gizli değil. Açılır menüdeki bir bağlantıyı tıkladığınızda gezinme çubuğu doğru şekilde gizlenir.


1
$("body,.nav a").click(function (event) {

    // only do this if navigation is visible, otherwise you see jump in
    //navigation while collapse() iS called 
    if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
    $('.navbar-collapse').collapse('toggle');
  }
});

1

% 100 çalışma: -

HTML olarak ekle

<div id="myMenu" class="nav-collapse">

JavaScript

 $(function(){ 
 var navMain = $("#myMenu");
 navMain.on("click", "a", null, function () {
     navMain.collapse('hide');
 });
});

0

Bu, animasyonu yerine nav çöküşünü gizler, ancak yukarıdaki cevapla aynı kavramı gizler

JS:

$('.nav a').on('click', function () {
    $("#funk").toggleClass('in collapse');
});

HTML:

<div class="navbar-collapse" id="funk">

Zaten animasyonlu localScroll.js kullandığım için bunu tek sayfa sitelerinde tercih ederim.


0

Mobil görünüm: bootstrap + açılır + jquery + scrollto'da geçiş navigasyonunu aynı sayfada çapaları / kimlikleri gösteren gezinme öğeleriyle nasıl gizlerim , bir sayfa şablonu

Yukarıdaki çözümlerden herhangi biriyle denediğim sorun, navigasyon menüsü çökmezken yalnızca alt menü öğelerini daraltmalarıydı.

Düşüncemi yaptım .. ve ne gözlemleyebiliriz? Kullanıcıların bir kaydırma bağlantısını her tıkladığımızda, sayfanın bu konuma kaydırılmasını ve çağdaş bir şekilde sayfa görünümünü geri yüklemek için menüyü daraltmasını istiyoruz.

Peki ... neden bu işi scrollto işlevlerine atamıyorsunuz? Kolay :-)

Yani iki kodda

// scroll to top action
$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');

ve

// scroll function
function scrollToID(id, speed){
var offSet = 67;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");
}

Aynı komutu her iki fonksiyona da ekledim

    if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}

(yukarıdaki katkıda bulunanlardan birine kudos)

bunun gibi (her iki kaydırmaya da aynı eklenmelidir)

$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}
});

Eğer eylemde görmek istiyorsanız sadece recupero dati da NAS'a bakın


0

Bootstrap3 kullanıcıları aşağıdaki kodu dener. Benim için çalıştı.

function close_toggle() {
   if ($(window).width() <= 768) {
      $('.nav a').on('click', function(){
          $(".navbar-toggle").click();
      });
   }
   else {
     $('.nav a').off('click');
   }
}
close_toggle();

$(window).resize(close_toggle);

0

Önyükleme .in, animasyonu tetiklemek için Daralt öğesinde bir sınıf ayarlar . .inSınıfı kaldırırsanız, animasyon çalışmaz, ancak tam olarak istediğinizi değil, öğeyi gizler.

Öğe üzerinde ifvarsayılan bootstrap sınıfının .inayarlanıp ayarlanmadığını kontrol etmek için bir ifade çalıştırmak daha hızlıdır .

Yani bu kod şöyle diyor:

öğeme sınıf .inuygulanmışsa, varsayılan Önyükleme animasyonunu tetikleyerek sınıfı kapatın. Aksi takdirde, varsayılan Bootstrap eylemini / açılış animasyonunu çalıştırın

$('#navbar a').on('click touchstart', function() {
    // if .in class is set on element, the element is visible – you want to hide it
    if ($('#navbar').hasClass('in')) {
        // collapse toggle will remove the .in class and animate the element closed 
        $('#navbar').collapse('toggle');
    }
})

0

Her birine bir kimlik ekleyin

<li> add data-target="myMenu" data-toggle="collapse"
<div id="myMenu" class="nav-collapse">
    <ul class="nav">
      <li class="active" data-target="myMenu" data-toggle="collapse"><a href="#home">Home</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#about">About</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#portfolio">Portfolio</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#services">Services</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#contact">Contact</a></li>
    </ul>
</div>

0

Bootstrap 3 * için başka bir hızlı çözüm şunlar olabilir:

$( document ).ready(function() {
    //
    // Hide collapsed menu on click
    //
    $('.nav a').each(function (idx, obj) {
        var selected = $(obj);

        selected.on('click', function() {
            if (selected.closest('.collapse.in').length > 0) {
                $('.navbar-toggle').click(); //bootstrap 3.x by Richard
            }
        });
    });
});

0

Aurelia ile birlikte çalışan bir çözüm yayınladım: https://stackoverflow.com/a/41465905/6466378

Sorun sadece ekleyemezsiniz olduğunu data-toggle="collapse"ve data-target="#navbar"sizin bir elemanlarına. Ve jQuery bir Aurelia veya Açısal ortamda çalışmaz.

Benim için en iyi çözüm, karşılık gelen medya sorgusunu dinleyen ve data-toggle="collapse"istenirse özniteliğe eklenen özel bir özellik oluşturmaktı :

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

Aurelia ile özel özellik şuna benzer:

import {autoinject} from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute {
  element: Element;

  constructor(element: Element) {
    this.element = element;
    var mql = window.matchMedia("(min-width: 768px)");
    mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
    this.handleMediaChange(mql);
  }

  handleMediaChange(mediaQueryList: MediaQueryList) {
    if (mediaQueryList.matches) {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (dataToggle) {
        this.element.attributes.removeNamedItem("data-toggle");
      }
    } else {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) {
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);
      }
    }
  }
}


0

Sabit bir üst gezinme ile fullPage.js kullanarak Bootstrap 4 kullanıyorum ve burada listelenen her şeyi karışık sonuçlarla denedim.

  • En iyi, temiz yolu denedim:

    data-toggle="collapse" data-target=".navbar-collapse.show"

    Menü çökecekti, ancak href bağlantıları hiçbir yere götürmeyecekti.

  • Mantıksal diğer yolları denedim:

    $('myClickableElements').on('click touchstart', function(){
      $(".navbar-collapse.show").collapse('hide');
      // or
      $(".navbar-collapse.show").collapse('toggle');
      // or
      $('.navbar-toggler').click()
    });

    Touchstart olayı nedeniyle bazı garip davranışlar olurdu: tıklanan düğmeler aslında tıkladığım düğmeler değil, dolayısıyla bağlantıları koparır. Ayrıca .show sınıfını, nav'mdaki diğer ilgisiz açılır listelere ekleyerek daha garip şeyler yaratacaktır.

  • Div değerini li olarak değiştirmeye çalıştı
  • E.preventDefault () ve e.stopPropagation () öğesine denendi
  • Daha çok denedim ve denedim

Hiçbir şey işe yaramaz.

Bunun yerine, (şimdiye kadar) bunu yapmak için harika bir fikrim vardı:

$(window).on('hashchange',function(){
   $(".navbar-collapse.show").collapse('hide');
});

Bu hashchange işlevinde zaten bir şeyler vardı, si sadece bu satırı eklemek zorunda kaldım.

Aslında tam olarak istediğim şeyi yapıyor: karma değiştiğinde menüyü daraltmak (başka bir yere giden bir tıklama oluştu). Bu iyi, çünkü artık menümde onu daraltmayacak bağlantılara sahip olabilirim.

Kim bilir, belki bu benim durumumda birine yardım eder!

Ve bu konuya katılan herkes sayesinde burada öğrenilecek çok fazla bilgi var.


0

Çoğu durumda açma / kapatma işlevini yalnızca açma / kapatma düğmesi görünür olduğunda çağırmak istersiniz ...

if ($('.navbar-toggler').is(":visible")) $('.navbar-toggler').click();

-1

Ben kontrol menü açılır 'in' sınıf kontrol ederek ve sonra kodu çalıştırın.

$('.navbar-collapse a').on('click', function(){
    if ( $( '.navbar-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

Mükemmel çalışıyor.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.