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

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

});

부트 스트랩 3.3.6에서 테스트되었습니다.

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

이것을 시도하십시오> 부트 스트랩 3

내가 찾던 것을 훌륭하게 표현했지만 자바 스크립트와 부트 스트랩 모달과 충돌이 발생하여 문제가 해결되었습니다.

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

아래 그림과 같이 숨길 수있는 축소 가능한 요소로 기본 Bootstrap 3의 collapse.js 메소드를 사용하는 .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>

이것은 모바일 화면과 같은 드롭 다운이있는 화면에서 완벽하게 작동하지만 데스크톱 및 태블릿에서는 깜박임을 만듭니다. .collapsing 클래스가 적용 되었기 때문입니다. 깜박임을 제거하기 위해 미디어 쿼리를 만들고 축소 클래스에 숨겨진 오버플로를 삽입했습니다.

@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"를 추가했습니다. 터치 스타트 / 엔드 지연 없음

이것이 내가 사용한 최고의 솔루션입니다.

$(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">

자바 스크립트

 $(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를 사용하기 때문에 단일 페이지 사이트에서 이것을 선호합니다.

모바일보기 : 부트 스트랩 + 드롭 다운 + jquery + 스크롤 토글에서 동일한 페이지의 앵커 / ID를 가리키는 탐색 항목을 사용하여 토글 탐색을 숨기는 방법 ( 한 페이지 템플릿)

위의 솔루션 중 하나를 실험하면서 문제는 하위 메뉴 항목 만 축소되고 탐색 메뉴는 축소되지 않는다는 것입니다.

그래서 나는 내 생각을했다. 그리고 우리는 무엇을 관찰 할 수 있는가? 우리 / 사용자가 스크롤 링크를 클릭 할 때마다 페이지가 해당 위치로 스크롤되고 동시에 메뉴가 축소되어 페이지보기가 복원되기를 원합니다.

음 ...이 작업을 스크롤 기능에 할당하지 않는 이유는 무엇입니까? 쉬운 :-)

두 코드에서

// 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);

부트 스트랩 .in은 축소 요소에 클래스를 설정 하여 애니메이션을 트리거하여 엽니 다. 단순히 .in클래스 를 제거하면 애니메이션이 실행되지 않지만 원하는 요소가 아닌 요소가 숨겨집니다.

if기본 부트 스트랩 클래스 .in가 요소에 설정 되어 있는지 확인하기 위해 명령문 을 실행하는 것이 더 빠를 것 입니다.

따라서이 코드는 다음과 같이 말합니다.

내 요소에 클래스가 .in적용된 경우 기본 부트 스트랩 애니메이션을 트리거하여 닫습니다. 그렇지 않으면 기본 부트 스트랩 작업 / 애니메이션을 실행하십시오.

$('#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');
    }
})

각 ID를 추가하십시오

<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"를 A 요소에. jure는 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);
      }
    }
  }
}

나는 고정 된 상단 탐색 메뉴와 함께 fullPage.js를 사용하여 Bootstrap 4를 사용하고 여기에 나열된 모든 것을 혼합 된 결과로 시도했습니다.

• 가장 깨끗하고 깨끗한 방법을 시도했습니다.

  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 함수에 물건을 가지고있었습니다. si 그냥이 줄을 추가해야했습니다.

실제로 원하는 것을 정확하게 수행합니다. 해시가 변경되면 메뉴가 축소됩니다 (예 : 다른 곳에서 발생하는 클릭이 발생했습니다). 어느 것이 좋으며, 이제 메뉴에 축소되지 않는 링크를 가질 수 있습니다.

누가 알겠는가, 아마도 이것이 내 상황에있는 누군가를 도울 것이다!

그리고 그 스레드에 참여한 모든 사람들 덕분에 여기에서 배울 많은 정보가 있습니다.

대부분의 경우 토글 버튼이 보이는 경우에만 토글 기능을 호출하려고합니다 ...

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

'in'클래스를 확인하여 메뉴를 체크인 한 다음 코드를 실행하십시오.

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

완벽하게 작동합니다.