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

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

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 -->

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
});

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"

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

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

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

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 .

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

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');
        }
  });

});

Bootstrap 3.3.6 üzerinde test edildi - iş!

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

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.

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();
        }
    });

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!

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

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Franciscus Agnew">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Navbar Collapse Function</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <header>
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-expanded="navbar"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
            <a class="navbar-brand" href="#">Brand Logo</a>
          </div><!-- navbar-header -->
    
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#">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="#staff">Staff</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul><!-- navbar-right -->
          </div><!-- navbar-collapse -->
          
        </div><!-- container -->
      </nav><!-- navbar-fixed-top -->
    </header>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    <!-- Custom Navbar Collapse Script Solution -->
    <script>
      $('.nav a').click(function() {
        $('.navbar-collapse').collapse('hide');  
      });
    </script>
  </body>
</html>

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;
  }
}

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>

İş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>

$(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

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
        });

    });

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.

$("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');
  }
});

% 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');
 });
});

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.

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

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);

Ö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');
    }
})

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>

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
            }
        });
    });
});

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);
      }
    }
  }
}

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.

Ç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();

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.