Подтвердить что ты не робот

Загрузочное меню 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>

Обычно он рушится на более мелких устройствах. Нажатие на кнопку меню расширяет меню, но если я нажму (или коснусь этого) по ссылке меню, меню останется открытым. Что мне нужно сделать, чтобы снова закрыть его?

4b9b3361

ОТВЕТЫ

Ответ 1

Настройка Bootstrap по умолчанию - это открытие меню при нажатии на элемент меню. Вы можете вручную переопределить это поведение, вызвав .collapse('hide'); в элементе jQuery, который вы хотите свернуть.

Ответ 2

Просто чтобы поделиться этим из решений на GitHub, это был популярный ответ:

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

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

Это связано с документом, поэтому вам не нужно делать это в ready() (вы можете динамически добавлять ссылки в ваше меню, и оно все равно будет работать), и оно вызывается только в том случае, если меню уже развернуто. Некоторые люди сообщают о странном мигании, когда меню открывается, а затем сразу же закрывается с другим кодом, который не проверял, что в меню был класс "in".

[ОБНОВЛЕНИЕ 2014-11-04] очевидно, что при использовании подменю вышеперечисленное может вызвать проблемы, поэтому вышеприведенное было изменено на:

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

Ответ 3

Измените это:

<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/issues/9013

Ответ 4

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

Одним щелчком событие было обработано дважды экземплярами jquery. Один закрыт и один открыл переключатель.

Ответ 5

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

Это поможет справиться с раскрывающимся списком в панели навигации

Ответ 6

У меня возникли проблемы с Bootstrap 4, alpha-6 и Joakim Johansson, которые я поставил в правильном направлении. Javascript не требуется. Помещение данных-target = ". Navbar-collapse" и data-toggle = "collapse" в тег 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>

Ответ 7

Я знаю, что этот вопрос касается Bootstrap 3, но если вы ищете решение для Bootstrap 4, просто сделайте это:

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

Ответ 8

Я сделал

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

Ответ 9

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

Ответ 10

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

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

(извините за ответ так, хотел добавить комментарий к этому ответу, но, кажется, у меня недостаточно кредитов, чтобы делать замечания)

Ответ 11

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

Ответ 12

Если вы хотите вручную переопределить это поведение, вызвав .collapse('hide') в директиве angular, вот код:

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>

Ответ 13

Если вы хотите, чтобы ваша навигация переключилась при использовании на экране мобильного телефона, просто добавив 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);
      }
    }
  }
}

Ответ 14

Все, что вам нужно, это data-target = ". navbar-collapse" в кнопке, ничего больше.

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

Ответ 15

Я обнаружил, что после большой борьбы, проб и ошибок, лучшее решение для меня на jsfiddle. Ссылка на вдохновение на jsfiddle.net. Я использую bootstrap navbar navbar-fixed-top с коллапсом и переключением гамбургеров. Вот моя версия на jsfiddle: jsfiddle Scrollspy navbar. Я получил базовую функциональность, используя инструкции на getbootsrap.com. Для меня проблема была в основном в неопределенных направлениях и js, рекомендованных сайтом getbootstrap. Наилучшая часть заключалась в том, что добавление этого дополнительного бита js (который включает некоторые из того, что упоминается в вышеупомянутых потоках), разрешило мне несколько проблем Scrollspy, включая:

  • Скрытое/переключенное навигационное меню скрывается, когда нажимается навигационная "секция" (например, href= "# foobar" ) (проблема с этим потоком).
  • Активный "раздел" был успешно выделен (т.е. успешно создан js class= "активный" )
  • Отказоустойчивая вертикальная полоса прокрутки, найденная на свернутом nav (только на небольших экранах), была устранена.

ПРИМЕЧАНИЕ. В приведенном ниже js-коде (со второй ссылки jsfiddle в моем сообщении):

topMenu = $( "# myScrollspy" ),

... значение myScrollspy должно соответствовать ему id = "" в вашем HTML, например...

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

Конечно, вы можете изменить это значение на любое значение, которое вам нравится.

Ответ 16

Пожалуйста, убедитесь, что вы используете последнюю версию jb-версии для начальной загрузки. Я столкнулся с той же проблемой и просто обновил файл bootstrap.js от bootstrap-3.3.6 сделал волшебство.

Ответ 17

Это код, который работал у меня:

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

Ответ 18

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

Ответ 19

Простой Попробуйте сделать функцию в javascript для раскрывающегося класса сбрасывания.

Пример:

JS

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

Подключите эту функцию к onClick простым работам для меня.

Ответ 20

У меня была аналогичная проблема, но моя не оставалась открытой, она быстро открывалась/закрывалась, я обнаружил, что перед загрузкой bootstrap.min.js загрузился jquery-1.11.1.min.js. Поэтому я изменил порядок этих двух файлов и зафиксировал свое меню. Бежит безупречно сейчас. Надеюсь, что это поможет.

Ответ 21

Проблема может заключаться в использовании устаревших версий bootstrap или jquery, или вы вызываете более одной версии в своей разметке.

Просто сохраняйте последние версии, вам нужна только одна ссылка. Решает проблему.

Ответ 22

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

Ответ 23

У меня была такая же проблема только на мобильном телефоне, но для приложения 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();
    }
  }

Надеюсь, поможет :)

Ответ 24

Мое меню не стандартное, но мне удалось автоматически свернуть мой, используя функцию "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