Ẩn Twitter Bootstrap sụp đổ điều hướng khi nhấp

Đây không phải là menu thả xuống của menu con, danh mục là lớp li như trong hình:

Bằng cách chọn một danh mục từ menu phản hồi (mẫu chỉ là một trang), tôi muốn tự động ẩn điều hướng thu gọn khi nhấp vào. Cũng đi dạo để sử dụng như điều hướng, vì mẫu chỉ có một trang. Tôi tìm kiếm một giải pháp không ảnh hưởng đến nó, đây là mã HTML của menu:

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

thử cái này:

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

Tôi chỉ sao chép 2 thuộc tính của btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in") trên mỗi liên kết như thế này:

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

Trong Bootstrap 4 Navbar , inđã thay đổi thành showcú pháp sẽ là:

data-toggle="collapse" data-target=".navbar-collapse.show"

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});

Tốt hơn là sử dụng các phương thức sụp đổ mặc định ( tài liệu V3 , tài liệu V4 ):

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

Thậm chí thanh lịch hơn mà không cần một đoạn mã trùng lặp, chỉ đơn giản là áp dụng các thuộc tính data-toggle="collapse"và data-target=".nav-collapse"thuộc tính cho chính điều hướng:

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

Siêu sạch, không cần JavaScript. Hoạt động rất tốt, miễn là các nav ayếu tố của bạn có đủ phần đệm cho ngón tay mập và bạn không ngăn chặn sự kiện nhấp chuột e.stopPropagation()khi người dùng nhấp vào nav acác mục.

Cập nhật của bạn

<li>
  <a href="#about">About</a>
</li>

đến

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

Sự thay đổi đơn giản này đã làm việc cho tôi.

Tham chiếu: https://github.com/twbs/bootstrap/issues/9013

Điều hướng nên được đóng bất cứ khi nào người dùng nhấp vào bất cứ nơi nào trên cơ thể - không chỉ các yếu tố điều hướng. Menu Say được mở, nhưng người dùng nhấp vào phần thân trang. Người dùng mong đợi để xem menu đóng.

Bạn cũng phải đảm bảo nút chuyển đổi được hiển thị, nếu không sẽ thấy một bước nhảy trong menu.

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

});

Đã thử nghiệm trên Bootstrap 3.3.6 - công việc!

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

Hãy thử điều này> Bootstrap 3

Rực rỡ tuyệt vời những gì tôi đang tìm kiếm, tuy nhiên tôi đã có một số xung đột với phương thức javascript và bootstrap, điều này đã sửa nó.

    $(function() {
    $('.navbar-nav').on('click', function(){ 
        if($('.navbar-header .navbar-toggle').css('display') !='none'){
            $(".navbar-header .navbar-toggle").trigger( "click" );
        }
    });
});

Hi vọng điêu nay co ich.

Điều này làm việc tốt cho tôi. Nó giống như câu trả lời được chấp nhận nhưng khắc phục sự cố liên quan đến chế độ xem máy tính để bàn / máy tính bảng

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth <= 768) {
            $(".navbar-toggle").click();
        }
    });

Tôi nghĩ sẽ tốt hơn khi sử dụng các phương thức sụp đổ của Bootstrap 3 mặc định bằng cách sử dụng .navbar-collapsephần tử đóng mở mà bạn muốn ẩn như hiển thị bên dưới.

Các giải pháp khác có thể gây ra các sự cố không mong muốn khác với cách hiển thị các thành phần hoặc chức năng trong trang web của bạn. Do đó, trong khi một số giải pháp có thể xuất hiện để khắc phục sự cố ban đầu của bạn, nó có thể giới thiệu rất tốt các vấn đề khác, vì vậy hãy đảm bảo bạn chạy thử nghiệm kỹ lưỡng trang web của mình sau bất kỳ sửa chữa nào.

Để xem mã này hoạt động:

1. Nhấn "Chạy đoạn mã này" bên dưới.
2. Nhấn nút "Toàn trang".
3. Cửa sổ tỷ lệ cho đến khi thả xuống kích hoạt.
4. Sau đó chọn một tùy chọn menu và thì đấy!

Chúc mừng!

$('.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>

Trên mỗi liên kết thả xuống, đặt data-toggle = "sụp đổ" và data-target = ". Nav-sụp đổ" trong đó điều hướng sụp đổ là tên bạn đặt cho danh sách thả xuống.

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

Điều này đang hoạt động hoàn hảo trên màn hình có màn hình thả xuống như màn hình di động, nhưng trên máy tính để bàn và máy tính bảng, nó tạo ra một flickr. Điều này là do lớp .collapsing được áp dụng. Để loại bỏ flickr tôi đã tạo một truy vấn phương tiện và chèn tràn ẩn vào lớp thu gọn.

@media (min-width: 768px) {
.collapsing {
    overflow: inherit;
  }
}

Thêm data-toggle = "sụp đổ" data-target = ". Navbar-collapse.in" vào thẻ <a>làm việc cho tôi.

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

Đây là cách tôi đã làm nó. Nếu có một cách mượt mà hơn, xin vui lòng cho tôi biết.

Bên trong các <a>thẻ nơi liên kết cho menu tôi đã thêm mã này:

onclick="$('.navbar-toggle').click()"

Nó bảo tồn các hình ảnh động slide. Vì vậy, trong sử dụng đầy đủ, nó sẽ trông như thế này:

<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" );
        }
    });
});

// LƯU Ý Tôi đã thêm "touchstart" cho cảm ứng di động. touchstart / end không có độ trễ

Đây là giải pháp tốt nhất tôi đã sử dụng.

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

    });

Đối với những người đã nhận thấy điều hướng máy tính để bàn nhấp nháy khi sử dụng giải pháp này:

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

Một giải pháp đơn giản cho vấn đề đó là chỉ tham chiếu thanh điều hướng bị sập bằng cách kiểm tra sự hiện diện của 'in':

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

Điều này làm sập thanh điều hướng khi nhấp khi thanh điều hướng ở chế độ di động, nhưng sẽ để lại một mình phiên bản máy tính để bàn. Điều này tránh sự nhấp nháy mà nhiều người đã chứng kiến ​​xảy ra trên các phiên bản máy tính để bàn.

Ngoài ra, nếu bạn có một thanh điều hướng với các menu thả xuống, bạn sẽ không thể thấy những thanh này vì thanh điều hướng sẽ bị ẩn ngay khi bạn nhấp vào chúng, vì vậy nếu bạn có các menu thả xuống (như tôi làm!), Hãy sử dụng như sau:

$('.nav a').on('click', function(e){
    if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

Điều này tìm kiếm sự hiện diện của lớp thả xuống phía trên liên kết được nhấp vào trong DOM, nếu nó tồn tại, thì liên kết đó có ý định khởi chạy một menu thả xuống và do đó menu không bị ẩn. Khi bạn nhấp vào một liên kết trong menu thả xuống, thanh điều hướng sẽ ẩn chính xác.

$("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% làm việc: -

Thêm vào HTML

<div id="myMenu" class="nav-collapse">

Javascript

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

Điều này che giấu sự sụp đổ điều hướng thay vì hoạt hình nó nhưng khái niệm tương tự như câu trả lời ở trên

JS:

$('.nav a').on('click', function () {
    $("#funk").toggleClass('in collapse');
});

HTML:

<div class="navbar-collapse" id="funk">

Tôi thích điều này trên các trang web đơn vì tôi sử dụng localScroll.js đã hoạt hình.

Chế độ xem trên thiết bị di động: cách ẩn điều hướng chuyển đổi trong bootstrap + dropdown + jquery + scrollto với các mục điều hướng trỏ đến neo / id trên cùng một trang , một mẫu trang

Vấn đề tôi đang thử nghiệm với bất kỳ giải pháp nào ở trên là chúng chỉ thu gọn các mục menu con, trong khi menu điều hướng không sụp đổ.

Vì vậy, tôi đã làm suy nghĩ của mình .. và những gì chúng ta có thể quan sát? Chà, mỗi khi chúng tôi / người dùng nhấp vào liên kết cuộn, chúng tôi muốn trang cuộn đến vị trí đó và đồng thời, thu gọn menu để khôi phục lại lượt xem trang.

Chà ... tại sao không giao công việc này cho các chức năng cuộn? Dễ dàng :-)

Vì vậy, trong hai mã

// scroll to top action
$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');

và

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

Tôi vừa thêm lệnh tương tự trong cả hai chức năng

    if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}

(danh tiếng cho một trong những người đóng góp ở trên)

như thế này (nên được thêm vào cả hai cuộn)

$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}
});

Nếu bạn muốn thấy nó hoạt động, chỉ cần kiểm tra recupero dati da NAS

Người dùng Bootstrap3 thử mã được đưa ra dưới đây. Nó làm việc cho tôi.

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

Bootstrap đặt một .in lớp trên phần tử Thu gọn để kích hoạt hình động - để mở nó. Nếu bạn chỉ loại bỏ .inlớp, hoạt hình sẽ không chạy, nhưng sẽ ẩn phần tử - không chính xác những gì bạn muốn.

Có khả năng nhanh hơn để chạy một ifcâu lệnh để kiểm tra xem lớp bootstrap mặc định.in đã được đặt trên phần tử chưa.

Vì vậy, mã này chỉ nói:

nếu phần tử của tôi có lớp .inđược áp dụng, hãy đóng nó bằng cách kích hoạt hoạt hình Bootstrap mặc định. Nếu không thì chạy hành động / hoạt hình Bootstrap mặc định của việc mở nó

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

Thêm một id sau đó vào mỗi

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

Một giải pháp nhanh khác cho Bootstrap 3. * có thể là:

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

Tôi đã đăng một giải pháp hoạt động với Aurelia tại đây: https://stackoverflow.com/a/41465905/6466378

Vấn đề là bạn không thể chỉ thêm data-toggle="collapse"vàdata-target="#navbar" vào một yếu tố của bạn. Và jQuery không hoạt động wenn trong môi trường Aurelia hoặc Angular.

Giải pháp tốt nhất cho tôi là tạo một thuộc tính tùy chỉnh lắng nghe truy vấn phương tiện tương ứng và thêm vào data-toggle="collapse"thuộc tính nếu muốn:

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

Thuộc tính tùy chỉnh với Aurelia trông như thế này:

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

Tôi đang sử dụng Bootstrap 4, sử dụng fullPage.js với điều hướng hàng đầu cố định và đã thử mọi thứ được liệt kê ở đây, với kết quả hỗn hợp.

• Đã thử cách tốt nhất, sạch sẽ:

  data-toggle="collapse" data-target=".navbar-collapse.show"

  Menu sẽ sụp đổ, nhưng các liên kết href sẽ không dẫn đến đâu cả.

• Đã thử các cách hợp lý khác:

  $('myClickableElements').on('click touchstart', function(){
    $(".navbar-collapse.show").collapse('hide');
    // or
    $(".navbar-collapse.show").collapse('toggle');
    // or
    $('.navbar-toggler').click()
  });

  Sẽ có một số hành vi kỳ lạ vì sự kiện touchstart: các nút được nhấp sẽ không phải là nút tôi thực sự đã nhấp, do đó phá vỡ các liên kết. Thêm vào đó, nó sẽ thêm lớp .show vào một số thả xuống không liên quan khác trong điều hướng của tôi, gây ra một số thứ kỳ lạ hơn.

• Đã cố gắng thay đổi div thành li
• Đã thử với e.preventDefault () và e.stopPropagation ()
• Đã thử và thử nhiều hơn

Không có gì sẽ làm việc.

Vì vậy, thay vào đó, tôi đã có ý tưởng tuyệt vời (cho đến nay) để làm điều đó:

$(window).on('hashchange',function(){
   $(".navbar-collapse.show").collapse('hide');
});

Tôi đã có công cụ trong hàm hashchange đó, tôi chỉ cần thêm dòng này.

Nó thực sự làm chính xác những gì tôi muốn: thu gọn menu khi hàm băm thay đổi (tức là một nhấp chuột dẫn đến một nơi khác đã xảy ra). Điều này là tốt, vì bây giờ tôi có thể có các liên kết trong menu của mình mà sẽ không thu gọn nó.

Ai biết được, có lẽ điều này sẽ giúp ai đó trong hoàn cảnh của tôi!

Và cảm ơn tất cả những người đã tham gia vào chủ đề đó, rất nhiều thông tin sẽ được học ở đây.

Trong hầu hết các trường hợp, bạn sẽ chỉ muốn gọi chức năng chuyển đổi nếu nút chuyển đổi hiển thị ...

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

Tôi đã kiểm tra trong menu được mở bằng cách kiểm tra lớp 'in' và sau đó chạy mã.

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

hoạt động hoàn hảo.