Сховати Twitter Bootstrap nav колапс при натисканні

Це не спадне підменю, категорія - клас li, як на малюнку:

Вибравши категорію з чуйного меню (шаблон - це лише одна сторінка), я хочу приховати збиток nav при автоматичному натисканні. Також пройдіться, щоб використовувати як навігацію, оскільки шаблон має лише одну сторінку. Я шукаю рішення, яке не впливає на це, ось 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 -->

спробуйте це:

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

Я просто копіюю два атрибути btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in") на кожне посилання так:

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

У Bootstrap 4 Navbar , inзмінилося до showтак що синтаксис буде виглядати так :

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

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

Краще використовувати по замовчуванням collapse.js методи ( V3 документації , V4 DOCS ):

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

Ще більш елегантним без лиза дублюючого коду є просто застосувати data-toggle="collapse"та data-target=".nav-collapse"атрибути до самого nav:

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

Супер чисто, не потрібно JavaScript. Чудово працює, доки у ваших nav aелементів є достатня кількість прокладок для жирних пальців, і ви не заважаєте клацати події, e.stopPropagation()коли користувачі натискають на nav aелементи.

Оновіть своє

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

до

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

Ця проста зміна спрацювала для мене.

Посилання: https://github.com/twbs/bootstrap/isissue/9013

Навігація повинна бути закрита в будь-який момент, коли користувач клацне будь-де на тілі - не лише навігаційні елементи. Скажімо, меню відкрите, але користувач клацає в тілі сторінки. Користувач розраховує побачити меню закрити.

Ви також повинні переконатися, що кнопка перемикання видно, інакше в меню буде показано стрибок.

$(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 - робота!

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

Спробуйте це> Bootstrap 3

Блискуче точно, що я шукав, однак у мене виникли сутички з javascript і модальним завантаженням, це виправило це.

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

Сподіваюся, це допомагає.

Це добре спрацювало для мене. Це те саме, що і прийнята відповідь, але виправляє проблему, пов’язану з поданням робочого столу / планшета

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

Я думаю, що краще використовувати за замовчуванням Bootstrap 3 краплі.js методи за допомогою.navbar-collapse як збірний елемент, який ви хочете приховати, як показано нижче.

Інші рішення можуть спричинити інші небажані проблеми з відображенням або функціонуванням елементів на вашій веб-сторінці. Тому, хоча деякі рішення можуть вирішити вашу початкову проблему, це може дуже добре представити інші, тому переконайтеся, що ви ретельно перевіряєте свій сайт після будь-якого виправлення.

Щоб побачити цей код у дії:

1. Натисніть "Запустити цей фрагмент коду" нижче.
2. Натисніть кнопку "Повна сторінка".
3. Вікно масштабування, поки не активується спадне меню.
4. Потім виберіть параметр меню і вуаля!

Ура!

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

На кожне спадне посилання ставимо data-toggle = "згортання" та data-target = ". Nav-kolaps", де nav-col - це ім'я, яке ти надаєш його у спадному списку.

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

Це чудово працює на екрані, що має спадне місце, як екрани мобільних пристроїв, але на робочому столі та планшеті це створює мерехтіння. Це тому, що застосовується клас .collapsing. Для видалення flickr я створив медіа-запит і вставив переповнення, приховане до класу, що згортається.

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

Додавання data-toggle = "згортання" data-target = ". Navbar-collapse.in" до тегу <a>працювало для мене.

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

Ось як я це зробив. Якщо є більш плавний спосіб, будь ласка, скажіть мені.

Всередині <a>тегів, де містяться посилання на меню, я додав цей код:

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

Він зберігає слайд-анімацію. Тож у повному використанні це виглядатиме так:

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

// ПРИМІТКА Я додав "touchstart" для мобільного дотику. touchstart / end не затримується

Це найкраще рішення, яке я використав.

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

    });

Для тих, хто помітив мерехтіння навігації на робочому столі, використовуючи це рішення:

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

Просте рішення цієї проблеми полягає в посиланні на згорнутий навбар лише перевіряючи наявність "in":

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

Це руйнує навбар при натисканні, коли навібар знаходиться в мобільному режимі, але залишить у спокої версію для робочого столу. Це дозволяє уникнути мерехтіння, багато людей стали свідком того, що трапляється на робочих версіях.

Крім того, якщо у вас є панель навігації зі спадними меню, ви не зможете побачити їх, оскільки панель навігації буде прихована, як тільки ви натиснете на них, тому якщо у вас є спадні меню (як я!), Скористайтеся наступним:

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

Це вимагає наявності класу, що випадає, над посиланням, яке натискали у DOM, якщо воно існує, то посилання має намір запустити спадне меню, і, отже, меню не приховане. При натисканні на посилання в меню, що випадає, навігаційна панель буде правильно прихована.

$("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% працює: -

Додати в HTML

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

Javascript

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

Це приховує напад колапсу замість того, щоб анімувати його, але та сама концепція, що і вище

JS:

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

HTML:

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

Я вважаю за краще це на сайтах з однією сторінкою, оскільки використовую localScroll.js, який вже анімує.

Перегляд для мобільних пристроїв: як приховати тумблерну навігацію в завантажувальному + випадаючому + jquery + прокрутці з елементами навігації, що вказує на якорі / ідентифікатори на одній сторінці , шаблон однієї сторінки

Проблема, з якою я експериментував з будь-яким із вищезазначених рішень, полягала в тому, що вони згортають лише елементи підменю, тоді як навігаційне меню не згортається.

Так я зробив свою думку .. і що ми можемо спостерігати? Щоразу, коли ми / користувачі натискаємо на посилання для прокрутки, ми хочемо, щоб сторінка прокручувалася до цієї позиції і одночасно згортала меню для відновлення подання сторінки.

Ну ... чому б не призначити цю роботу функціям scrollto? Легко :-)

Так у двох кодах

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

і

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

Я щойно додав однакову команду в обох функціях

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

(кудо одному з вищевказаних учасників)

як це (те саме слід додати до обох сувоїв)

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

якщо ви хочете побачити його в дії, просто перевірте його рекупером дату NAS

Користувачі Bootstrap3 намагаються подати наведений нижче код. Це працювало для мене.

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 встановлює .inклас на елемент Collapse, щоб запустити анімацію - відкрити її. Якщо ви просто видалите .inклас, анімація не запуститься, але приховає елемент - не зовсім те, що ви хочете.

Ймовірно, швидше запустити ifоператор, щоб перевірити, чи .inвстановлений для елемента клас завантаження за замовчуванням .

Отже, цей код просто говорить:

якщо мій елемент застосував клас .in, закрийте його, запустивши анімацію Bootstrap за замовчуванням. В іншому випадку запустіть завантажувальну дію / анімацію за замовчуванням для її відкриття

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

Потім додайте ідентифікатор до кожного

<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. * може бути:

$( 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: https://stackoverflow.com/a/41465905/6466378

Проблема в тому, що ви не можете просто додати data-toggle="collapse"іdata-target="#navbar" до своїх елементів. І jQuery не працює Wenn в Аврелії або Кутовому середовищі.

Найкращим рішенням для мене було створення спеціального атрибута, який слухає відповідний медіа-запит і додає в data-toggle="collapse"атрибут за бажанням:

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

Спеціальний атрибут з Aurelia виглядає приблизно так:

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

Я на Bootstrap 4, використовую fullPage.js з фіксованою верхньою навігацією, і спробував усе, що перераховано тут, зі змішаними результатами.

• Спробував найкращий, чистий спосіб:

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

  Меню розпадеться, але посилання на href нікуди не приведуть.

• Спробували логічні інші способи:

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

  Було б якесь дивне поведінка через подію сенсорного початку: натиснуті кнопки в кінцевому підсумку не будуть тими, на які я насправді натискав, отже, порушуючи посилання. Плюс це додало б клас .show до деяких інших непов’язаних спадних елементів у моєму навігаційному середовищі, що спричинить ще деякі дивні речі.

• Спробував змінити дів на лі
• Спробували в e.preventDefault () та e.stopPropagation ()
• Спробував і спробував більше

Нічого б не працювало.

Отже, натомість у мене була (поки що) дивна ідея зробити це:

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

У мене вже були речі в тій функції хеш-обміну, я просто повинен був додати цей рядок.

Він насправді робить саме те, що я хочу: згортає меню, коли змінюється хеш (тобто відбувся клік, який веде кудись ще). Що добре, тому що тепер у мене в меню можуть бути посилання, які не згортають його.

Хтозна, може, це допоможе комусь у моїй ситуації!

І дякую всім, хто брав участь у цій темі, тут можна дізнатися багато інформації.

У більшості випадків ви хочете викликати функцію перемикання, лише якщо видно кнопку перемикання ...

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

Я перевірив, що меню відкривається, перевіривши клас "in", а потім запустіть код.

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

працює чудово.