클릭시 트위터 부트 스트랩 탐색 축소 숨기기

이것은 하위 메뉴 드롭 다운이 아니며 범주는 그림과 같이 클래스 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
});

답변

다음 과 같이 각 링크 에서 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>

에서 부트 스트랩 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');
        }
  });

});