Згорнене меню Bootstrap 3 не закривається при натисканні

У мене є більш-менш стандартна навігація з завантажувальної програми 3

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

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

Налаштування Bootstrap за замовчуванням - це тримати меню відкритим при натисканні на пункт меню. Ви можете вручну змінити цю поведінку, натиснувши .collapse('hide');на елемент jQuery, який потрібно згортати.

Просто, щоб поділитися цим рішенням на GitHub, ця популярна відповідь:

https://github.com/twbs/bootstrap/isissue/9013#issuecomment-39698247

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

Це підключено до документа, тому вам не доведеться робити це готовим чином () (ви можете динамічно додавати посилання до свого меню, і воно все ще буде працювати), і воно викликається лише у випадку, якщо меню вже розширено. Деякі люди повідомили про дивне миготіння, де меню відкривається, а потім одразу закривається іншим кодом, який не підтвердив, що в меню було клас "in".

[ОНОВЛЕННЯ 2014-11-04] Очевидно, що під час використання підменю вищезазначене може спричинити проблеми, тому вищезгадане змінено на:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});

Змініть це:

<li><a href="#one">One</a></li>

до цього:

<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>  

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

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

У мене була така ж проблема, але викликана включенням двічі bootstrap.js та jquery.jsфайлів.

Одним клацанням миші подія двічі оброблялася обома екземплярами jquery. Один закрився, а один відкрив перемикач.

$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

Це допоможе в обробці спаду в навігаційній смузі

У мене виникли / були подібні проблеми з Bootstrap 4, alpha-6, і відповідь Йоакима Йохансона вище почала мене в правильному напрямку. Не потрібно JavaScript. Введення даних-target = ". Navbar-крах" і data-toggle = "згортання" в тег div всередині nav, але оточуючи посилання / кнопки, працювало для мене.

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>

Я знаю, що це питання для Bootstrap 3, але якщо ви шукаєте рішення для Bootstrap 4 , просто зробіть це:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});

У мене була така ж проблема, якою я користувався jQuery-1.7.1і bootstrap 3.2.0. Я змінив свою версію jQuery на останню ( jquery-1.11.2) версію, і все працює добре.

я зробила

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});

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

<li><a href="#one">One</a></li> to 
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>  

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

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

Якщо ви хочете вручну змінити цю поведінку, зателефонувавши .collapse ('сховай') у директиву кутового, ось код:

файл JavaScript:

angular
  .module('yourAppModule')
  .directive('btnAutoCollapse', directive);

function directive() {
  var dir = {
    restrict: 'A',
    scope: {},
    link: link
  };
  return dir;

  function link(scope, element, attrs) {    
    element.on('click', function(event) {              
      $(".navbar-collapse.in").collapse('hide');
    });
  }
}

Html:

<li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>

Будь ласка, переконайтеся, що ви використовуєте останню версію bootstrap js. Я зіткнувся з тією ж проблемою і просто оновлення файлу bootstrap.js з bootstrap-3.3.6 зробило магію.

Якщо ви хочете, щоб ваша навігація перемикалася лише під час використання на екрані мобільного телефону, просто додайте data-toggle="collapse"іdata-target="#navbar" елементи будуть працювати на екрані мобільного пристрою, але дадуть вам дивне мерехтіння при натисканні на екран робочого столу. Рішення jQuery не працюють добре, якщо ви перебуваєте в середовищі Аурелія або Кут.

Найкращим рішенням для мене було створення спеціального атрибута, який слухає відповідний медіа-запит і додає в 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);
      }
    }
  }
}

Я виявив, що після довгої боротьби, спроб та помилок найкраще рішення для мене на jsfiddle. Посилання на натхнення на jsfiddle.net . Я використовую навигаційний пристрій завантажувача bootstrap з фіксованим верхом із згортанням та перемиканням гамбургерів. Ось моя версія на jsfiddle: jsfiddle Scrollspy navbar . Я отримував лише основні функціональні можливості, використовуючи інструкції на getbootsrap.com. Для мене проблема здебільшого полягала в туманних напрямках і js, рекомендованих сайтом getbootstrap. Найкращою мірою було те, що додавання цього додаткового біта js (який включає частину того, що згадується у вищезазначених потоках) вирішило для мене кілька проблем Scrollspy, зокрема:

1. Згорнене / переключене меню nav ховається, коли натискається навігаційний розділ (наприклад, href = "# foobar") (проблема, що стосується цієї теми).
2. Активний "розділ" було успішно виділено (тобто. Js успішно створено class = "active")
3. Роздратована вертикальна смуга прокрутки, виявлена ​​на згорнутому навігаційному каналі (лише на невеликих екранах), була усунена.

ПРИМІТКА. У коді js, показаному нижче (із другого посилання jsfiddle в моєму дописі):

topMenu = $ ("# myScrollspy"),

... значення "myScrollspy" повинне відповідати ідентифікатору id = "" у вашому HTML-коді так ...

<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">

Звичайно, ви можете змінити це значення на будь-яке значення, яке вам подобається.

Все, що вам потрібно, це дані-target = ". Navbar-згортання" у кнопці, нічого іншого.

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

Це код, який працював для мене:

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})

У мене була така ж проблема: переконайтеся, що bootstrap.js включений у вашу html-сторінку. У моєму випадку меню відкрилося, але не закрилося. Як тільки я включив файл js bootstrap, все просто працювало.

Простий Спробуйте зробити функцію в javascript для класу згортання, що випадає.

Приклад:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

    $timeout(function(){
        $scope.preLoader = false;
        $(document).ready(function() {
            $("#dropdown-element").toggleClass('show');
        });
    },100);

};

Підключіть цю функцію до onClickпростих робіт для мене.

У мене була подібна проблема, але моя не залишилася б відкритою, вона відкриється / закриється швидко, я виявив, що у мене завантажувався jquery-1.11.1.min.js перед bootstrap.min.js. Тож я змінив порядок цих 2 файлів і виправив своє меню. Зараз працює бездоганно. Сподіваюся, це допомагає

Проблема може полягати в тому, що ви використовуєте застарілі версії bootstrap або jquery, АБО ви називаєте більше однієї версії під час розмітки.

Просто зберігайте останні версії, вам потрібна лише одна посилання. Вирішує проблему.

ви можете просто переконатися, що ви завантажуєте jQuery і Bootstrap.min.js ATF. Ваша навігація - це перше, що потрібно відобразити на сторінці, тому якщо у вас є сценарії в нижній частині HTML, ви втрачаєте будь-яку функціональність JavaScript.

У мене була та сама проблема лише для мобільних пристроїв, але для програми Angular, і це я зробив:

app.component.html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-md-12">
      <div class="navbar-header page-scroll">
      <button id ="navButton" style="color:red"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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" routerLink="/"><img id="navbrand" class="site-logo"  src="assets/img/yayaka_logo.png"/></a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li class="dropdown" appDropdown>
          <a class="dropdown-toggle" style="cursor: pointer;">
            ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a (click) = "closeMenu()" href="/#about">About</a></li>
            <li><a (click) = "closeMenu()" href="/#services">Services</a></li>
          </ul>
        </li>
        <li class="page-scroll">
          <a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
</nav>

app.component.ts

 closeMenu() {
    var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
    if (isMobile) {
      document.getElementById('navButton').click();
    }
  }

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

Моє меню не стандартне, але мені вдалося автоматично згортати шахту, використовуючи функцію "onclick" та ".click ()".

<div class="main-header">
    <div class="container">
        <div id="menu-wrapper">
            <div class="row">

                <div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs">

                </div> <!-- /.logo-wrapper -->

                <div class="logo-wrapper2 visible-xs col-xs-9">

                </div> <!-- /.smaller logo-wrapper -->

                <div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center">
                    <ul class="menu-first hidden-md hidden-sm hidden-xs">
                        <li class="active"><a href="#">item1</a></li> |
                        <li><a href="#our-team">item2</a></li> |
                        <li><a href="#services">item3</a></li> |
                        <li><a href="#elia">item4</a></li> |
                        <li><a href="#portfolio">item5</a></li> |
                        <li><a href="#contact">item6</a></li>
                    </ul>
                    <a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a>
                </div> <!-- /.main-menu -->
            </div> <!-- /.row -->
        </div> <!-- /#menu-wrapper -->
        <div class="menu-responsive hidden-lg">
            <ul>
                <li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li>
                <li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li>
                <li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li>
                <li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li>
                <li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li>
                <li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li>
            </ul>
        </div> <!-- /.menu-responsive -->
    </div> <!-- /.container -->
</div> <!-- /.main-header