Sembunyikan Twitter Bootstrap dan runtuh saat klik

Ini bukan dropdown submenu, kategorinya adalah kelas li seperti pada gambar:

Dengan memilih kategori dari menu responsif (templatnya hanya satu halaman), saya ingin menyembunyikan nav collapse secara otomatis saat mengklik. Juga berjalan-jalan untuk digunakan sebagai navigasi, karena templat hanya memiliki satu halaman. Saya mencari solusi yang tidak mempengaruhi itu, berikut adalah kode menu HTML:

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

coba ini:

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

Saya hanya meniru 2 atribut dari btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in") pada setiap tautan seperti ini:

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

Di Bootstrap 4 Navbar , intelah berubah showjadi sintaksnya adalah:

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

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

Lebih baik menggunakan metode collapse.js default ( V3 docs , V4 docs ):

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

Bahkan lebih elegan tanpa menjilat kode duplikat, adalah dengan hanya menerapkan data-toggle="collapse"dan data-target=".nav-collapse"atribut ke nav itu sendiri:

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

Sangat bersih, tidak perlu JavaScript. Berfungsi bagus, asalkan nav aelemen Anda memiliki bantalan yang cukup untuk jari-jari yang gemuk, dan Anda tidak mencegah peristiwa klik yang meluap e.stopPropagation()saat pengguna mengeklik nav aitem.

Perbarui

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

untuk

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

Perubahan sederhana ini berhasil bagi saya.

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

Navigasi harus ditutup kapan saja pengguna mengklik di mana saja pada tubuh - bukan hanya elemen navigasi. Menu Say terbuka, tetapi pengguna mengklik di badan halaman. Pengguna berharap untuk melihat menu tutup.

Anda juga harus memastikan tombol sakelar terlihat, jika tidak, lompatan terlihat di menu.

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

});

Diuji pada Bootstrap 3.3.6 - bekerja!

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

Coba ini> Bootstrap 3

Brilliant tepat apa yang saya cari, namun saya memiliki beberapa bentrokan dengan javascript dan modal bootstrap, ini memperbaikinya.

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

Semoga ini membantu.

Ini bekerja dengan baik untuk saya. Sama dengan jawaban yang diterima tetapi memperbaiki masalah yang terkait dengan tampilan desktop / tablet

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

Saya pikir lebih baik menggunakan Bootstrap 3 default metode collapse.js menggunakan .navbar-collapseelemen collapsible yang ingin Anda sembunyikan seperti yang ditunjukkan di bawah ini.

Solusi lain dapat menyebabkan masalah lain yang tidak diinginkan dengan cara elemen ditampilkan atau berfungsi di halaman web Anda. Oleh karena itu, walaupun beberapa solusi mungkin muncul untuk memperbaiki masalah awal Anda, mungkin sangat baik memperkenalkan yang lain, jadi pastikan Anda menjalankan pengujian menyeluruh terhadap situs Anda setelah perbaikan apa pun.

Untuk melihat kode ini dalam aksi:

1. Tekan "Jalankan Cuplikan Kode Ini" di bawah.
2. Tekan tombol "Halaman Penuh".
3. Skala jendela sampai drop-down diaktifkan.
4. Kemudian pilih opsi menu dan voila!

Bersulang!

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

Pada setiap tautan dropdown masukkan data-toggle = "collapse" dan data-target = ". Nav-collapse" di mana nav-collapse adalah nama yang Anda berikan ke daftar dropdown.

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

Ini berfungsi dengan baik pada layar yang memiliki dropdown seperti layar seluler, tetapi pada desktop dan tablet itu menciptakan flickr. Ini karena kelas .collapsing diterapkan. Untuk menghapus flickr, saya membuat kueri media dan menyisipkan overflow yang disembunyikan ke kelas collapsing.

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

Menambahkan data-toggle = "collapse" data-target = ". Navbar-collapse.in" ke tag <a>bekerja untuk saya.

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

Begini cara saya melakukannya. Jika ada cara yang lebih halus, tolong beri tahu saya.

Di dalam <a>tag tempat tautan untuk menu saya tambahkan kode ini:

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

Ini mempertahankan animasi slide. Jadi dalam penggunaan penuh akan terlihat seperti ini:

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

// CATATAN Saya menambahkan "touchstart" untuk sentuhan mobile. touchstart / end tidak memiliki penundaan

Ini adalah solusi terbaik yang saya gunakan.

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

    });

Bagi mereka yang telah memperhatikan desktop navbars flicker saat menggunakan solusi ini:

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

Solusi sederhana untuk masalah itu adalah dengan mereferensikan navbar yang runtuh hanya dengan memeriksa keberadaan 'in':

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

Ini menciutkan navbar saat klik saat navbar berada dalam mode seluler, tetapi akan menyisakan versi desktop. Ini menghindari kerlipan yang banyak orang saksikan terjadi pada versi desktop.

Selain itu, jika Anda memiliki navbar dengan menu dropdown Anda tidak akan dapat melihatnya karena navbar akan disembunyikan segera setelah Anda mengkliknya, jadi jika Anda memiliki menu dropdown (seperti saya lakukan!), Gunakan yang berikut:

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

Ini mencari keberadaan kelas tarik-turun di atas tautan yang diklik di DOM, jika ada, maka tautan itu bermaksud meluncurkan menu tarik-turun dan akibatnya menu tidak disembunyikan. Ketika Anda mengklik tautan di dalam menu dropdown, navbar akan bersembunyi dengan benar.

$("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% berfungsi: -

Tambahkan dalam HTML

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

Javascript

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

Ini menyembunyikan nav runtuh bukannya menganimasikannya tetapi konsep yang sama seperti jawaban di atas

JS:

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

HTML:

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

Saya lebih suka ini di situs halaman tunggal karena saya menggunakan localScroll.js yang sudah menjiwai.

Tampilan seluler: cara menyembunyikan navigasi beralih di bootstrap + dropdown + jquery + gulir dengan item navigasi yang menunjuk ke jangkar / id pada halaman yang sama , satu templat halaman

Masalah yang saya coba dengan salah satu solusi di atas adalah bahwa mereka hanya menciutkan item submenu, sedangkan menu navigasi tidak runtuh.

Jadi saya melakukan pemikiran saya .. dan apa yang bisa kita amati? Ya, setiap kali kita / para pengguna mengklik sebuah tautan scrollto, kami ingin halaman tersebut bergulir ke posisi itu dan pada saat yang sama, tutup menu untuk mengembalikan tampilan halaman.

Nah ... mengapa tidak menugaskan pekerjaan ini ke fungsi scrollto? Mudah :-)

Jadi dalam dua kode

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

dan

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

Saya baru saja menambahkan perintah yang sama di kedua fungsi

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

(pujian kepada salah satu kontributor di atas)

seperti ini (hal yang sama harus ditambahkan ke kedua gulungan)

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

jika Anda ingin melihatnya beraksi, cukup periksa recupero dati da NAS

Pengguna Bootstrap3 mencoba kode di bawah ini. Ini berhasil untuk saya.

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

Bootstrap menetapkan .inkelas pada elemen Ciutkan untuk memicu animasi - untuk membukanya. Jika Anda hanya menghapus .inkelas, animasi tidak berjalan, tetapi akan menyembunyikan elemen - tidak persis apa yang Anda inginkan.

Mungkin lebih cepat menjalankan ifpernyataan untuk memeriksa apakah kelas bootstrap default .intelah ditetapkan pada elemen.

Jadi kode ini hanya mengatakan:

jika elemen saya .inmenerapkan kelas , tutup dengan memicu animasi Bootstrap default. Jika tidak, jalankan tindakan / animasi Bootstrap default untuk membukanya

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

Tambahkan id lalu ke masing-masing

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

Solusi cepat lain untuk Bootstrap 3. * dapat berupa:

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

Saya memposting solusi yang bekerja dengan Aurelia di sini: https://stackoverflow.com/a/41465905/6466378

Masalahnya adalah Anda tidak bisa hanya menambahkan data-toggle="collapse"dandata-target="#navbar" ke elemen Anda. Dan jQuery tidak bekerja dengan baik di lingkungan Aurelia atau Angular.

Solusi terbaik bagi saya adalah membuat atribut khusus yang mendengarkan kueri media terkait dan menambahkan data-toggle="collapse"atribut jika diinginkan:

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

Atribut khusus dengan Aurelia terlihat seperti ini:

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

Saya menggunakan Bootstrap 4, menggunakan fullPage.js dengan nav teratas yang tetap, dan mencoba semua yang tercantum di sini, dengan hasil yang beragam.

• Mencoba yang terbaik, cara bersih:

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

  Menu akan runtuh, tetapi tautan href tidak akan mengarah ke mana pun.

• Mencoba cara lain yang logis:

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

  Akan ada beberapa perilaku aneh karena peristiwa touchstart: tombol yang diklik akan berakhir bukan yang benar-benar saya klik, karenanya memutus tautan. Plus itu akan menambahkan kelas .show ke beberapa dropdown yang tidak terkait lainnya di nav saya, menyebabkan beberapa hal aneh.

• Mencoba mengubah div ke li
• Sudah mencoba e.preventDefault () dan e.stopPropagation ()
• Sudah mencoba dan mencoba lagi

Tidak ada yang berhasil.

Jadi, sebagai gantinya, saya punya ide bagus (sejauh ini) untuk melakukan itu:

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

Saya sudah memiliki beberapa hal dalam fungsi hashchange itu, dan saya hanya perlu menambahkan baris ini.

Ini benar-benar melakukan apa yang saya inginkan: mengosongkan menu ketika hash berubah (yaitu klik yang mengarah ke tempat lain) Itu bagus, karena sekarang saya dapat memiliki tautan di menu saya yang tidak akan runtuh.

Siapa tahu, mungkin ini akan membantu seseorang dalam situasi saya!

Dan terima kasih kepada semua orang yang telah berpartisipasi dalam utas itu, banyak info untuk dipelajari di sini.

Dalam kebanyakan kasus, Anda hanya ingin memanggil fungsi sakelar jika tombol sakelar terlihat ...

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

Menu yang saya check in dibuka dengan memeriksa kelas 'in' dan kemudian jalankan kodenya.

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

bekerja dengan sempurna.