เมนูที่ยุบ Bootstrap 3 ไม่ปิดเมื่อคลิก

122

ฉันมีการนำทางมาตรฐานมากหรือน้อยจาก bootstrap 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 Gumus

คำตอบ:

48

การตั้งค่าเริ่มต้นของ Bootstrap คือการเปิดเมนูค้างไว้เมื่อคุณคลิกที่รายการเมนู คุณสามารถแทนที่พฤติกรรมนี้ด้วยตนเองได้โดยเรียก.collapse('hide');ใช้องค์ประกอบ jQuery ที่คุณต้องการยุบ

— VCNinc
แหล่งที่มา
8
ผิดปกติ bootstrap สลับคลาส "ยุบ" โดยอัตโนมัติ คุณไม่ต้องการรหัส jquery เพิ่มเติม หากคุณมีพฤติกรรมดังกล่าวหมายความว่ามีบางอย่างผิดปกติในโค้ด html ของคุณ (สำหรับส่วนของฉันฉันใส่ jquery และ bootstrap สองครั้งดูคำตอบของ @raisercostin)
— RomOne
@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');
    }
});

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

[อัปเดต 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เป็นวิธีที่กำหนดโดย bootstrap และแนบกับวัตถุ jQuery ... สันนิษฐานว่าพวกเขาใช้สิ่งนี้ซ้ำเพื่อวัตถุประสงค์หลายประการ (หีบเพลง navbar ฯลฯ ): getbootstrap.com/javascript / # ยุบการใช้งาน
— 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
นี่เป็นทางออกที่ดีที่สุด ไม่มี javascript ไม่มี jQuery หากคุณต้องการให้บางลิงค์เปิดเมนูอยู่อย่าเพิ่มพารามิเตอร์เหล่านี้ ควรชี้เป็นคำตอบที่ดีที่สุด. ขอบคุณ.
— ed1nh0
55

ฉันมีปัญหาเดียวกัน แต่เกิดจากการรวมสองครั้ง bootstrap.jsและjquery.jsไฟล์

ในคลิกเดียวเหตุการณ์จะถูกประมวลผลสองครั้งโดยอินสแตนซ์ jquery ทั้งสอง หนึ่งปิดและหนึ่งเปิดการสลับ

— raisercostin
แหล่งที่มา
3
ฉันมีปัญหาเดียวกัน แต่ไม่รู้ว่ามีการรวมสองครั้ง ขอบคุณสำหรับการโพสต์สิ่งนี้!
— Brian ONeil
2
ฝึกงานของเราก็เช่นกัน ขอบคุณสำหรับการโพสต์สิ่งนี้
— Teisman
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');
});

สิ่งนี้จะช่วยในการจัดการเมนูแบบเลื่อนลงในแถบนำทาง

— Chakradhar Vyza
แหล่งที่มา
สิ่งนี้แก้ไขปัญหาของฉันที่ใช้ bootstrap กับ javascript จากปัญหาที่สร้างสไลด์โชว์ jssor โค้ดนี้ยังสร้างเอฟเฟกต์สุดเจ๋งเมื่อขยายและยุบเมนูมือถือ
— Adam West
ขอบคุณ @Chakradhar ช่วยประหยัดเวลาของฉัน
— Omar Bahir
ขอบคุณลืมไปว่า Laravel 5.5 JS มี B และ Jquery ในไฟล์ js หลัก
— Jack Vial
12

ฉันมี / มีปัญหาที่คล้ายกันกับ Bootstrap 4, alpha-6 และคำตอบของJoakim Johanssonข้างต้นทำให้ฉันไปในทิศทางที่ถูกต้อง ไม่จำเป็นต้องใช้จาวาสคริปต์ การใส่ data-target = ". navbar-collision" และ data-toggle = "ยุบ" ลงในแท็ก 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 = "collision" data-target = ". navbar-collision">
— Dessus
โพสต์นี้แล้วเมื่อ 3 ปีที่แล้ว นอกจากนี้ยังแบ่งภาพเคลื่อนไหวในมุมมองที่ไม่ใช่มือถือ
— Bevor
6

ฉันรู้ว่าคำถามนี้มีไว้สำหรับBootstrap 3แต่หากคุณกำลังมองหาวิธีแก้ปัญหาสำหรับBootstrap 4ให้ทำสิ่งนี้:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
— ไซ
แหล่งที่มา
ฉันใช้ BS4 เบต้าและรหัสของคุณทำงานได้อย่างสมบูรณ์ ฉันลองวิธีแก้ปัญหาที่แนะนำอื่น ๆ ทั้งหมดที่นี่โดยไม่มีโชค เห็นได้ชัดว่า BS4 มีการเปลี่ยนแปลงมากพอที่โซลูชันอื่น ๆ ไม่สามารถใช้ได้
— Bicycle Dave
เพื่อความเกี่ยวข้องและเพื่อให้ข้อมูลที่อัปเดตไปพร้อมกัน - นี่น่าจะเป็นคำตอบที่ดีที่สุด
— Ricky
@Ricky OP ระบุ Bootstrap 3 ไม่ใช่ 4
— Malavos
สำหรับเมนูแบบเลื่อนลงฉันใช้สิ่งนี้:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— James Wilkins
5

ฉันมีปัญหาเดียวกันฉันใช้jQuery-1.7.1และbootstrap 3.2.0. ฉันเปลี่ยนเวอร์ชัน jQuery เป็นเวอร์ชันล่าสุด ( jquery-1.11.2) และทุกอย่างทำงานได้ดี

— Densol
แหล่งที่มา
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 ก่อนอื่นคุณต้องเพิ่ม id ในเมนู div ของคุณและเมื่อคุณคลิกที่เมนูของคุณจากนั้นเมนูทั้งหมดจะถูกซ่อน ตัวอย่างเช่น: - เมื่อคุณคลิกที่เมนูเกี่ยวกับเราแท็บเมนูที่เหลือจะถูกซ่อน
— จิต
1
ขอบคุณ แต่โปรดเขียนไว้ในคำตอบของคุณ;)
— bfontaine
1

ในกรณีที่คุณต้องการลบล้างพฤติกรรมนี้ด้วยตนเองโดยเรียก. collapse ('hide') ภายในคำสั่งของ angular นี่คือรหัส:

ไฟล์ javascript:

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

โปรดตรวจสอบว่าคุณใช้ bootstrap js เวอร์ชันล่าสุด ฉันประสบปัญหาเดียวกันและเพียงแค่อัปเกรดไฟล์ bootstrap.js จาก bootstrap-3.3.6 ก็ทำเวทมนตร์ได้แล้ว

— อำพันอรุณ
แหล่งที่มา
1

หากคุณต้องการให้การนำทางของคุณสลับเมื่อใช้งานบนหน้าจอมือถือเพียงแค่เพิ่ม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);
      }
    }
  }
}
ขยายข้อมูลโค้ด

— halllo
แหล่งที่มา
0

ฉันพบว่าหลังจากการต่อสู้ลองผิดลองถูกวิธีที่ดีที่สุดสำหรับฉันใน jsfiddle เชื่อมโยงไปยังแรงบันดาลใจใน jsfiddle.net ฉันใช้ navbar navbar-fixed-top ของ bootstrap พร้อมการยุบและการสลับแฮมเบอร์เกอร์ นี่คือรุ่นของฉันใน jsfiddle: jsfiddle Scrollspy navbar ฉันได้รับฟังก์ชั่นพื้นฐานโดยใช้คำแนะนำใน getbootsrap.com เท่านั้น สำหรับฉันปัญหาส่วนใหญ่อยู่ในทิศทางที่คลุมเครือและ js แนะนำโดยไซต์ getbootstrap ส่วนที่ดีที่สุดคือการเพิ่ม js พิเศษนี้ (ซึ่งรวมถึงสิ่งที่กล่าวถึงในเธรดด้านบน) ช่วยแก้ปัญหา Scrollspy หลายประการสำหรับฉัน ได้แก่ :

  1. เมนู nav แบบยุบ / สลับจะซ่อนเมื่อมีการคลิก nav "section" (เช่น href = "# foobar") (ปัญหาในการแก้ไขชุดข้อความนี้)
  2. "ส่วน" ที่ใช้งานอยู่ได้รับการเน้นเรียบร้อยแล้ว (เช่น js สร้างสำเร็จ class = "active")
  3. แถบเลื่อนแนวตั้งที่น่ารำคาญที่พบในการนำทางที่ยุบ (เฉพาะบนหน้าจอขนาดเล็ก) ถูกกำจัด

หมายเหตุ: ในโค้ด js ที่แสดงด้านล่าง (จากลิงค์ jsfiddle ที่สองในโพสต์ของฉัน):

topMenu = $ ("# myScrollspy"),

... ค่า "myScrollspy" ต้องตรงกับ id = "" ใน HTML ของคุณเช่นนั้น ...

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

แน่นอนคุณสามารถเปลี่ยนค่านั้นเป็นค่าใดก็ได้ที่คุณต้องการ

— อดัมคาลิห์มาน
แหล่งที่มา
0

สิ่งที่คุณต้องมีคือ data-target = ". navbar-collision" ในปุ่มนี้ไม่มีอะไรอื่น

<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>
— Marodo
แหล่งที่มา
+1: นอกจากนี้ยังทำงานได้โดยการเพิ่ม data-toggle = "collision" data-target = ". navbar-collision" ไปยัง <a /> หรือในกรณีของฉัน <Link /> ใน Meteorjs ด้วย React ขอบคุณ
— 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 ของคุณ ในกรณีของฉันเมนูเปิดขึ้น แต่ไม่ได้ปิด ทันทีที่ฉันรวมไฟล์ bootstrap js ทุกอย่างก็ใช้งานได้

— Elitmiar
แหล่งที่มา
0

ง่ายๆลองสร้างฟังก์ชันใน javascript สำหรับคลาสการยุบแบบเลื่อนลง

ตัวอย่าง:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

ขอให้ฟังก์ชันนี้ใช้onClickงานง่ายสำหรับฉัน

— yasir_mughal
แหล่งที่มา
0

ฉันมีปัญหาที่คล้ายกัน แต่ของฉันจะไม่เปิดมันจะเปิด / ปิดอย่างรวดเร็วฉันพบว่าฉันโหลด jquery-1.11.1.min.js ก่อน bootstrap.min.js ดังนั้นฉันจึงย้อนลำดับของ 2 ไฟล์นั้นและแก้ไขเมนูของฉัน ทำงานได้อย่างไม่มีที่ติในขณะนี้ หวังว่าจะช่วยได้

— Vasko
แหล่งที่มา
0

ปัญหาอาจเกิดจากคุณกำลังใช้ bootstrap หรือ 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.