Bootstrap 3 축소 메뉴가 클릭시 닫히지 않음

122

부트 스트랩 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>

작은 장치에서는 정상적으로 축소됩니다. 메뉴 버튼을 클릭하면 메뉴가 확장되지만 메뉴 링크를 클릭 (또는 터치)하면 메뉴가 열린 상태로 유지됩니다. 다시 닫으려면 어떻게해야합니까?

html  css  twitter-bootstrap  navigation 
— 편집병
소스
5
user3669917의 대답은 확실히 가장 쉽고 직접적인 대답입니다!
— Thomas
1
— Inanc 구 무스

답변:

48

Bootstrap의 기본 설정은 메뉴 항목을 클릭 할 때 메뉴를 열어 두는 것입니다. .collapse('hide');축소하려는 jQuery 요소를 호출하여이 동작을 수동으로 재정의 할 수 있습니다 .

— VCNinc
소스
8
이것은 잘못되었습니다. 부트 스트랩은 "collapse"클래스를 자동으로 토글합니다. 추가 jquery 코드가 필요하지 않습니다. 그러한 행동이 있다면 html 코드에 문제가 있음을 의미합니다 (제 부분에서는 jquery와 부트 스트랩을 두 번 포함했습니다.
— RomOne 2017
@RomOne 정답입니다. 기본적으로 링크를 클릭하면 부트 스트랩 이 메뉴를 닫지 않습니다 . 다른 대답은 사람들 이이 질문에 대한 정답이 아닌 jQuery를 두 번 잘못 포함하는 경우 에만 적용됩니다.
— Zim
136

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"클래스가 있는지 확인하지 않은 다른 코드로 즉시 닫힙니다.

[UPDATE 2014-11-04] 분명히 하위 메뉴를 사용할 때 위의 문제가 발생할 수 있으므로 위의 내용이 다음과 같이 수정되었습니다.

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
— 케빈 넬슨
소스
1
완벽하게 작동합니다. 공유해 주셔서 감사합니다!
— Rodrigo Chiong
'$ (this) .collapse ('hide ');'설명해 주시겠습니까? 부디. '붕괴'가 어디에서 왔는지 이해가 안
— 돼요
@ImranNazir, 미안합니다 이것은 질문 이후의 방법이지만 collapse부트 스트랩에 의해 정의되고 jQuery 객체에 첨부 된 메소드입니다 ... 아마도 그들은 여러 목적 (아코디언, navbar 등)으로 이것을 재사용합니다
— Kevin Nelson
업데이트 된 코드는 나를 위해 일했지만 위의 답변은 그렇지 않았습니다. 감사!
— RandomUs1r
"[UPDATE 2014-11-04]"가 작동했습니다. 솔루션이 필요하지 않은 bootstrap.js 및 jquery에 대한 중복 참조를 제거하는 것이 권장되는 다른 솔루션의 경우. 이 솔루션은 디버깅 시간을 줄이고보다 명시적인 동작으로 문제를 해결하는 데 도움이되었습니다. 감사합니다!. 도움이 되었기를 바랍니다.
— Nour Lababidi
122

이것을 변경하십시오 : 

<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

— FullStackDev
소스
14
이 솔루션은 모바일보기에 적합하지만 링크를 클릭하면 큰 화면에서 애니메이션 표시 / 숨기기를 표시합니다.
— Ayman Al-Absi
22
@ AymanAl-Absi 값 .in끝에 추가 해야합니다 data-target: data-target=".navbar-collapse.in". 이 답변의 주석에서 : stackoverflow.com/a/21797534/89818
— caw
이것은 나를 위해 잘 작동하지만 스크롤 스파이를 깨뜨립니다. 왜 그런지 알 수 있습니까?
— Craig Harley
1
@caw 답변으로 위의 코드를 업데이트했을 때 나를 위해 일했습니다. 나는 또한 scrollspy 기능을 사용하고 있습니다.
— Niraj
이것은 단연 최고의 솔루션입니다. 자바 스크립트도, jQuery도 없습니다. 특정 링크가 메뉴를 열어 두도록하려면이 매개 변수를 추가하지 마십시오. 최고의 답변으로 지적되어야합니다. 감사합니다.
— ed1nh0
55

나는이 같은 문제가 있었지만 포함하여 발생하는 회 bootstrap.js 와jquery.js 파일 .

한 번의 클릭으로 두 jquery 인스턴스에서 이벤트가 두 번 처리되었습니다. 하나는 닫히고 하나는 토글을 열었습니다.

— 모금 자
소스
3
나는 똑같은 문제가 있었지만 두 번 포함된다는 것을 깨닫지 못했습니다. 게시 해 주셔서 감사합니다!
— Brian ONeil 2014
2
인턴도 마찬가지였습니다. 게시 해 주셔서 감사합니다.
— Teisman 2015
2
남자! 나도 똑같은 일을했습니다. 인턴으로 돌아간 것 같아요!
— Dicer
2
정말 도움이되었습니다! 나는 이것에 대해 며칠 동안 일하고 있었다. 이것은 navbar 템플릿을 사용할 때 매우 일반적 일 수 있습니다. 조심하세요! :)
— Matt Butler
2
이것은 우수 답변으로 표시되어야합니다. 나는 제거 bootstrap.js이 문제를 해결 같은 문제가 있었다
— katwekibs
17 
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

이것은 탐색 모음에서 드롭 다운을 처리하는 데 도움이됩니다.

— 차크라 다르 비자
소스
이것은 jssor 슬라이드 쇼에서 자바 스크립트와 함께 부트 스트랩을 사용하여 문제가 발생하는 문제를 해결했습니다. 이 코드는 모바일 메뉴를 확장 및 축소 할 때도 멋진 효과를 만듭니다.
— Adam West
감사합니다 @Chakradhar, 그것은 내 시간을 절약했습니다.
— Omar Bahir
감사합니다. Laravel 5.5 JS에는 기본 js 파일에 B 및 Jquery가 포함되어 있다는 사실을 잊었습니다.
— Jack Vial
12

Bootstrap 4, alpha-6 및 Joakim Johansson 의 답변 과 비슷한 문제가 있거나 비슷한 문제가 있습니다. 자바 스크립트가 필요하지 않습니다. data-target = ". navbar-collapse"및 data-toggle = "collapse"를 nav 내부의 div 태그에 넣지 만 링크 / 버튼을 둘러싸는 것이 저에게 효과적이었습니다.

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

— 폴
소스
귀하의 게시물은 나를 많이 도왔습니다. 이 문제가 해결되었습니다. <body data-toggle = "collapse"data-target = ". navbar-collapse">
— Dessus
이것은 이미 3 년 전에 게시되었습니다. 또한 모바일이 아닌보기에서 애니메이션을 중단합니다.
— Bevor
6

이 질문이 Bootstrap 3에 대한 것이라는 것을 알고 있지만 Bootstrap 4에 대한 솔루션을 찾고 있다면 다음과 같이하십시오.

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
— Syed
소스
BS4 베타를 사용하고 있으며 코드가 완벽하게 작동합니다. 나는 운이없는 다른 모든 제안 된 솔루션을 여기에서 시도했습니다. BS4는 다른 솔루션이 적용되지 않을 정도로 충분히 변경되었습니다.
— Bicycle Dave
관련성과 업데이트 된 정보를 동시에 유지하기 위해-이것이 최선의 답변이어야합니다.
— Ricky
@Ricky OP는 4가 아닌 부트 스트랩 3을 지정했습니다.
— Malavos
: 드롭 다운과 메뉴의 경우 나는이 사용$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— 제임스 윌킨스
5

나는 같은 문제가 없었다 내가 사용하고 있었다 jQuery-1.7.1과 bootstrap 3.2.0. jQuery 버전을 최신 ( jquery-1.11.2) 버전으로 변경했는데 모든 것이 잘 작동합니다.

— 덴솔
소스
5

나는했다 

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});
— 짜다
소스
4

메뉴 항목 자체를 변경하기 위해 이전에 게시 된 솔루션은 아래와 같이 메뉴가 작은 장치에있을 때 작동하지만 메뉴가 전체 너비에 있고 확장 되면 부작용 이 있습니다. 이로 인해 가로 스크롤 막대가 메뉴 항목 . 자바 스크립트 솔루션에는 이러한 부작용이 없습니다.

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

(이렇게 대답 해 주셔서 죄송합니다. 그 답변에 의견을 추가하고 싶었지만 발언을 할만큼 충분한 크레딧이없는 것 같습니다.)

— Wim Van Houts
소스
2 
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
— 전표
소스
새 버전 확인 Matthias S :-)
— Chit
@bfontaine 먼저 메뉴 div에 id를 추가해야하며 메뉴를 클릭하면 모든 메뉴가 숨겨집니다. 예 :-회사 소개 메뉴를 클릭하면 나머지 메뉴 탭이 숨겨집니다.
— Chit
1
감사합니다,하지만 쓰기를 기쁘게 에 답)
— bfontaine
1

각도 지시문 내에서 .collapse ( 'hide')를 호출하여이 동작을 수동으로 재정의하려는 경우 다음 코드가 있습니다.

자바 스크립트 파일 :

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>
— Mirna De Jesus
소스
1

최신 부트 스트랩 js 버전을 사용하고 있는지 확인하십시오. 나는 똑같은 문제에 직면했고 bootstrap-3.3.6에서 bootstrap.js 파일을 업그레이드하는 것만으로도 마술이되었습니다.

— 아만 아룬
소스
1

모바일 화면에서 사용할 때만 내비게이션을 전환하려면 다음을 추가 data-toggle="collapse"하고data-target="#navbar" 를 A 요소에 모바일 화면에 작동하지만 바탕 화면에서 클릭 할 때 당신에게 이상한 깜박임을 줄 것이다. Aurelia 또는 Angular 환경에서는 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);
      }
    }
  }
}
스 니펫 확장

— Halllo
소스
0

많은 투쟁, 시행 착오 끝에 jsfiddle에서 나에게 가장 적합한 솔루션이라는 것을 알았습니다. jsfiddle.net의 영감에 대한 링크 . 접기 및 햄버거 토글과 함께 부트 스트랩의 navbar navbar-fixed-top을 사용하고 있습니다. 다음은 jsfiddle의 내 버전입니다. jsfiddle Scrollspy navbar . getbootsrap.com의 지침을 사용하여 기본 기능 만 얻었습니다. 나에게 문제는 대부분 모호한 방향과 getbootstrap 사이트에서 권장하는 js였습니다. 가장 좋은 점은이 추가 js (위의 스레드에서 언급 한 내용 중 일부를 포함 함)를 추가하면 다음과 같은 몇 가지 Scrollspy 문제가 해결된다는 것입니다.

  1. 탐색 "섹션"(예 : href = "# foobar")을 클릭하면 축소 / 전환 된 탐색 메뉴가 숨겨집니다 (이 스레드 해결 문제).
  2. 활성 "섹션"이 성공적으로 강조 표시되었습니다 (예 : js가 class = "active"를 성공적으로 생성 함).
  3. 축소 된 탐색에서 발견되는 성가신 세로 스크롤 막대 (작은 화면에서만)가 제거되었습니다.

참고 : 아래에 표시된 js 코드에서 (내 게시물의 두 번째 jsfiddle 링크에서) :

topMenu = $ ( "# myScrollspy"),

... 값 "myScrollspy"는 HTML의 id = ""와 일치해야합니다.

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

물론 그 값을 원하는 값으로 변경할 수 있습니다.

— 아담 칼리 만
소스
0

버튼에 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>
— 마로도
소스
+1 : 또한 data-toggle = "collapse"data-target = ". navbar-collapse"를 <a />에 추가하거나 제 경우에는 Meteorjs의 React와 함께 <Link />를 추가하여 작동합니다. 감사합니다.
— Joe L.
예, 작동 <a/>하지만 작동 하지 않았고 <NavLink/>, 무너졌지만 <NavLink/>더 이상 작동하지 않습니다. 이유가 무엇입니까?
— 피라미드
0

이것은 나를 위해 일한 코드입니다.

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})
— Roddy P. Carbonell
소스
0

동일한 문제가 발생하여 bootstrap.js가 html 페이지에 포함되어 있는지 확인하십시오. 제 경우에는 메뉴가 열렸지만 닫히지 않았습니다. 부트 스트랩 js 파일을 포함하자마자 모든 것이 작동했습니다.

— Elitmiar
소스
0

단순 드롭 다운 접기 클래스를 위해 자바 스크립트에서 함수를 만들어보세요.

예:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

이 기능을 onClick간단한 작업에 연결하십시오.

— yasir_mughal
소스
0

비슷한 문제가 있었지만 내 열리지 않을 것입니다. 빠르게 열리거나 닫힐 것입니다 .bootstrap.min.js 전에 jquery-1.11.1.min.js 가로 드되었음을 알았습니다. 그래서 나는 그 두 파일의 순서를 바꾸고 메뉴를 수정했습니다. 이제 완벽하게 실행됩니다. 도움이되기를 바랍니다.

— Vasko
소스
0

문제는 부트 스트랩 또는 jquery의 오래된 버전을 사용하거나 마크 업에서 둘 이상의 버전을 호출하는 것일 수 있습니다.

최신 버전을 유지하고 하나의 참조 만 필요합니다. 문제를 해결합니다.

— 새긴 ​​금
소스
0

jQuery 및 Bootstrap.min.js ATF를로드하고 있는지 확인하는 것이 좋습니다. 내비게이션은 페이지에서 가장 먼저 렌더링되는 것이므로 HTML 하단에 스크립트가있는 경우 JavaScript 기능이 손실됩니다.

— 크리스 존슨
소스
0

모바일에서만 같은 문제가 있었지만 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();
    }
  }

도움이되기를 바랍니다 :)

— Stathoula
소스
-2

내 메뉴는 navbar 표준 메뉴가 아니지만 "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
— 브라보 스테파 네
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.