Скрыть Twitter Bootstrap Nav свернуть на клик

Это не раскрывающееся меню подменю, это класс li, как на картинке:

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

Я просто копирую 2 атрибута 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 docs , V4 docs ):

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

Еще более элегантный без лизать дублированного кода, можно просто применить data-toggle="collapse"и data-target=".nav-collapse"атрибуты самого нав:

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

Я думаю, что лучше использовать методы collapse.js Bootstrap 3 по умолчанию, используя .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 = "collapse" и data-target = ". Nav-collapse", где nav-collapse - это имя, которое вы даете ему в раскрывающемся списке.

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

Это отлично работает на экране с раскрывающимся списком, как на мобильных экранах, но на настольных компьютерах и планшетах он создает flickr. Это потому, что применяется класс .collapsing. Чтобы удалить flickr, я создал медиа-запрос и вставил переполнение, скрытое для сворачивающегося класса.

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

Добавление data-toggle = "collapse" 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» для мобильных устройств Touch. 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, который уже анимирует.

Мобильное представление: как скрыть переключение навигации в bootstrap + dropdown + jquery + scrollto с элементами навигации, которые указывают на якоря / идентификаторы на той же странице , один шаблон страницы

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

Так я и подумал .. а что мы можем наблюдать? Что ж, каждый раз, когда мы / пользователи щелкаем ссылку scrollto, мы хотим, чтобы страница прокручивалась до этой позиции, и одновременно свертываем меню, чтобы восстановить просмотр страницы.

Хорошо ... почему бы не назначить эту работу функциям 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" );
}
});

Если вы хотите увидеть это в действии, просто посмотрите на Recupero Dati Da 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 по умолчанию. В противном случае запустите действие / анимацию 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 не работает в среде Aurelia или Angular.

Лучшим решением для меня было создание настраиваемого атрибута, который прослушивает соответствующий медиа-запрос и 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()
  });

  Было бы странное поведение из-за события touchstart: нажатые кнопки оказывались не теми, на которых я действительно нажимал, следовательно, ссылки разрываются. Кроме того, он добавил бы класс .show к некоторым другим несвязанным выпадающим спискам в моей навигационной панели, что привело бы к еще более странным вещам.

• Пытался изменить div на li
• Пытался e.preventDefault () и e.stopPropagation ()
• Попробовал и попробовал больше

Ничто не сработает.

Так что вместо этого у меня была (пока) изумительная идея сделать это:

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

У меня уже было что-то в этой функции hashchange, мне просто нужно было добавить эту строку.

На самом деле он делает именно то, что я хочу: сворачивает меню при изменении хэша (т. Е. Произошел щелчок в другом месте). Это хорошо, потому что теперь в моем меню могут быть ссылки, которые не сворачивают.

Кто знает, может это кому-нибудь поможет в моей ситуации!

И спасибо всем, кто участвовал в этой теме, здесь можно узнать много информации.

В большинстве случаев вам нужно будет вызывать функцию переключения, только если кнопка переключения видна ...

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

Я проверил в меню открывается, проверяя «в» классе, а затем запустить код.

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

работает отлично.