ซ่อน Twitter Bootstrap nav ยุบเมื่อคลิก

นี่ไม่ใช่เมนูย่อยแบบเลื่อนลงหมวดหมู่คือคลาส 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
});

ฉันเพิ่งจำลอง 2 แอตทริบิวต์ของ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>

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

ดีกว่าที่จะใช้วิธีการยุบ js เริ่มต้น ( เอกสาร V3 , เอกสาร V4 ):

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

สง่างามยิ่งขึ้นโดยไม่ต้องใช้รหัสซ้ำเพียงแค่ใช้data-toggle="collapse"และdata-target=".nav-collapse"แอตทริบิวต์กับ nav เอง:

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

});

ทดสอบกับ Bootstrap 3.3.6 - ได้ผล!

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

ลองสิ่งนี้> Bootstrap 3

ยอดเยี่ยมอย่างยิ่งในสิ่งที่ฉันกำลังมองหาอย่างไรก็ตามฉันมีข้อขัดแย้งกับจาวาสคริปต์และโมดอล bootstrap ซึ่งได้รับการแก้ไขแล้ว

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

ฉันคิดว่าจะดีกว่าถ้าใช้วิธีการยุบ js เริ่มต้นของ Bootstrap 3 โดยใช้.navbar-collapseเป็นองค์ประกอบที่ยุบได้ที่คุณต้องการซ่อนดังที่แสดงด้านล่าง

วิธีแก้ปัญหาอื่น ๆ อาจทำให้เกิดปัญหาอื่น ๆ ที่ไม่ต้องการกับการแสดงองค์ประกอบหรือฟังก์ชันในหน้าเว็บของคุณ ดังนั้นแม้ว่าวิธีแก้ปัญหาบางอย่างอาจช่วยแก้ปัญหาเบื้องต้นของคุณได้ แต่ก็อาจแนะนำผู้อื่นได้เป็นอย่างดีดังนั้นโปรดทำการทดสอบไซต์ของคุณอย่างละเอียดหลังจากแก้ไขแล้ว

หากต้องการดูการทำงานของโค้ดนี้:

1. กด "Run This Code Snippet" ด้านล่าง
2. กดปุ่ม "เต็มหน้า"
3. ปรับขนาดหน้าต่างจนกระทั่งเมนูแบบเลื่อนลงเปิดใช้งาน
4. จากนั้นเลือกตัวเลือกเมนูและ voila!

ไชโย!

$('.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 = "ยุบ" และ data-target = ". nav-collision" โดยที่ nav-collision คือชื่อที่คุณตั้งให้กับรายการแบบเลื่อนลง

<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 ในการลบ Flickr ฉันได้สร้างคิวรีสื่อและแทรกโอเวอร์โฟลว์ที่ซ่อนอยู่ในคลาสการยุบ

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

การเพิ่ม data-toggle = "ยุบ" 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" สำหรับการสัมผัสมือถือ touchstart / end ไม่มีความล่าช้า

นี่เป็นทางออกที่ดีที่สุดที่ฉันเคยใช้

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

วิธีแก้ปัญหาง่ายๆคือการอ้างอิง navbar ที่ยุบโดยการตรวจสอบการมีอยู่ของ '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">

Javascript

 $(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 ที่เคลื่อนไหวอยู่แล้ว

มุมมองมือถือ: วิธีซ่อนการนำทางแบบสลับใน bootstrap + dropdown + jquery + scrollto ด้วยรายการการนำทางที่ชี้ไปยังจุดยึด / รหัสในหน้าเดียวกันเทมเพลตหน้าเดียว

ปัญหาที่ฉันกำลังทดลองกับวิธีแก้ไขปัญหาใด ๆ ข้างต้นคือการยุบเฉพาะรายการเมนูย่อยในขณะที่เมนูการนำทางไม่ยุบ

ฉันก็เลยคิดว่า .. แล้วเราจะสังเกตได้จากอะไร? ทุกครั้งที่เรา / ผู้ใช้คลิกลิงก์เลื่อนเราต้องการให้หน้าเลื่อนไปที่ตำแหน่งนั้นและในขณะเดียวกันก็ยุบเมนูเพื่อเรียกคืนการดูหน้าเว็บ

ทำไมไม่มอบหมายงานนี้ให้กับฟังก์ชัน scrollto ล่ะ? ง่าย :-)

ดังนั้นในสองรหัส

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

Bootstrap ตั้งค่า.inคลาสในองค์ประกอบการยุบเพื่อทริกเกอร์ภาพเคลื่อนไหว - เพื่อเปิด หากคุณเพียงแค่ลบ.inคลาสออกไปภาพเคลื่อนไหวจะไม่ทำงาน แต่จะซ่อนองค์ประกอบไม่ใช่สิ่งที่คุณต้องการ

น่าจะเร็วกว่าในการเรียกใช้ifคำสั่งเพื่อตรวจสอบว่าคลาส bootstrap เริ่มต้น.inถูกตั้งค่าไว้ในองค์ประกอบหรือไม่

ดังนั้นรหัสนี้บอกว่า:

หากองค์ประกอบของฉันมีการ.inใช้คลาสให้ปิดโดยเรียกใช้ภาพเคลื่อนไหว Bootstrap เริ่มต้น หรือเรียกใช้การดำเนินการ Bootstrap เริ่มต้น / ภาพเคลื่อนไหวของการเปิด

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

เพิ่มรหัสแล้วให้กับแต่ละคน

<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"องค์ประกอบของคุณได้ และ 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);
      }
    }
  }
}

ฉันใช้ Bootstrap 4 โดยใช้ fullPage.js กับการนำทางด้านบนคงที่และลองทุกอย่างที่แสดงที่นี่พร้อมผลลัพธ์ที่หลากหลาย

• พยายามที่ดีที่สุดและสะอาด:

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

  จะมีพฤติกรรมแปลก ๆ บางอย่างเนื่องจากเหตุการณ์ทัชสตาร์ต: ปุ่มที่คลิกจะไม่ใช่ปุ่มที่ฉันคลิกจริงๆจึงทำให้ลิงก์เสียหาย นอกจากนี้มันจะเพิ่มคลาส. show ลงในเมนูแบบเลื่อนลงอื่น ๆ ที่ไม่เกี่ยวข้องในการนำทางของฉันทำให้เกิดสิ่งแปลก ๆ ขึ้น

• พยายามเปลี่ยน div เป็น li
• พยายาม e.preventDefault () และ e.stopPropagation ()
• พยายามและพยายามมากขึ้น

ไม่มีอะไรจะทำงาน

ดังนั้นฉันจึงมีความคิดที่ยอดเยี่ยม (จนถึงตอนนี้) ในการทำเช่นนั้น:

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

ฉันมีของในฟังก์ชัน hashchange แล้วฉันแค่ต้องเพิ่มบรรทัดนี้

มันทำในสิ่งที่ฉันต้องการจริงๆ: การยุบเมนูเมื่อแฮชเปลี่ยนไป (เช่นการคลิกที่นำหน้าไปที่อื่นเกิดขึ้น) ซึ่งเป็นสิ่งที่ดีทำให้ตอนนี้ฉันสามารถมีลิงค์ในเมนูของฉันที่จะไม่ยุบมัน

ใครจะรู้บางทีนี่อาจจะช่วยใครบางคนในสถานการณ์ของฉัน!

และขอบคุณทุกคนที่มีส่วนร่วมในกระทู้นั้นข้อมูลมากมายที่จะเรียนรู้ที่นี่

ในกรณีส่วนใหญ่คุณจะต้องการเรียกใช้ฟังก์ชันสลับก็ต่อเมื่อมองเห็นปุ่มสลับ ...

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

ฉันเปิดเมนูเช็คอินโดยทำเครื่องหมายในชั้นเรียนแล้วเรียกใช้รหัส

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

ทำงานได้อย่างสมบูรณ์