बूटस्ट्रैप 3 ध्वस्त मेनू क्लिक पर बंद नहीं होता है

122

मेरे पास बूटस्ट्रैप 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>

यह छोटे उपकरणों पर सामान्य रूप से ढह जाता है। मेनू बटन पर क्लिक करने से मेनू का विस्तार होता है, लेकिन यदि मैं मेनू लिंक पर क्लिक (या उस मामले के लिए स्पर्श) करता हूं, तो मेनू खुला रहता है। मुझे क्या करना है, इसे फिर से बंद करने के लिए?

— पागलपन
स्रोत

5

user3669917 का उत्तर निश्चित रूप से सबसे आसान और सबसे सीधे आगे का उत्तर है!

— थॉमस

1

क्लिक पर ट्वीटर बूटस्ट्रैप नेव

— Inanc Gumus

48

जब आप किसी मेनू आइटम पर क्लिक करते हैं तो बूटस्ट्रैप की डिफ़ॉल्ट सेटिंग मेनू को खुला रखना है। आप उस व्यवहार को मैन्युअल रूप से ओवरराइड कर सकते हैं .collapse('hide');जिसे आप jQuery तत्व पर कॉल करना चाहते हैं।

— VCNinc
स्रोत

8

यह गलत है, बूटस्ट्रैप स्वचालित रूप से "पतन" वर्ग है। आपको किसी अतिरिक्त jquery कोड की आवश्यकता नहीं है। यदि आपके पास ऐसा व्यवहार है, तो इसका मतलब है कि आपके HTML कोड में कुछ गड़बड़ है (मेरे हिस्से के लिए मैं दो बार jquery और बूटस्ट्रैप शामिल था, @raisercostin का उत्तर देखें)।

— रोमेन

@RomOne यह उत्तर सही है। डिफ़ॉल्ट रूप से लिंक क्लिक किए जाने के बाद बूटस्ट्रैप मेनू को बंद नहीं करता है । अन्य उत्तर केवल तभी लागू होता है जब लोग गलत तरीके से jQuery को दो बार शामिल करते हैं जो इस प्रश्न का सही उत्तर नहीं है।

— ज़िम

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

निर्दोष रूप से काम करता है। साझा करने के लिए धन्यवाद!

— रॉड्रिगो Chiong

क्या आप '$ (यह) .collapse (' Hide ') समझा सकते हैं?' कृप्या। मुझे समझ में नहीं आता कि 'पतन' कहाँ से आता है

— टाइमबैंड

@ImranNazir, क्षमा करें यह प्रश्न के बाद का तरीका है, लेकिन collapseबूटस्ट्रैप द्वारा परिभाषित और jQuery ऑब्जेक्ट से जुड़ी एक विधि है ... संभवतः, वे इसे कई उद्देश्यों (अकॉर्डियन, नेवबार, आदि) के लिए फिर से उपयोग करते हैं: getootootstrap.com/javascript / # पतन-उपयोग

— केविन नेल्सन

अपडेट किया गया कोड मेरे लिए काम करता है, इससे ऊपर के उत्तर नहीं थे। धन्यवाद!

— रैंडमयूएस

"[अद्यतन 2014-11-04]" काम किया। अन्य समाधान के लिए जहां यह बूटस्ट्रैप के डुप्लिकेट संदर्भ को हटाने की सलाह देता है। जेएस और जेक्वेरी जो समाधान के लिए आवश्यक नहीं है। मुझे डिबगिंग पर कमर से कम समय और अधिक स्पष्ट व्यवहार के साथ समस्या को ठीक करने के लिए यह समाधान मिला। धन्यवाद!। मुझे उम्मीद है कि इससे आपको मदद मिलेगी क्योंकि इसने मेरी मदद की।

— नूर लबबिदी

122

इसे बदलो:

<li><a href="#one">One</a></li>

इसके लिए:

<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>

इस साधारण बदलाव ने मेरे लिए काम किया।

Ref: https://github.com/twbs/bootstrap/issues/9013

— FullStackDev
स्रोत

14

यह समाधान मोबाइल दृश्य के लिए ठीक है, लेकिन एक बार लिंक पर क्लिक करने पर यह बड़ी स्क्रीन में शो / हिडन एनीमेशन दिखाता है।

— अयमान अल-अबी

22

@ AymanAl-Absi आपको मूल्य .inके अंत में जोड़ना होगा :। इस उत्तर में टिप्पणी से: stackoverflow.com/a/21797534/89818data-targetdata-target=".navbar-collapse.in"

— caw

यह मेरे लिए बहुत अच्छा काम करता है लेकिन यह स्क्रैपी को तोड़ देता है, किसी भी विचार को क्यों हो सकता है?

— क्रेग हार्ले

1

जब @caw उत्तर के साथ कोड के ऊपर अद्यतन किया गया तो मेरे लिए काम किया। मैं भी स्क्रॉल सुविधा का उपयोग कर रहा हूँ।

— नीरज

यह अब तक का सबसे अच्छा समाधान है। कोई जावास्क्रिप्ट नहीं, कोई jQuery नहीं। यदि आप मेनू को खुला रखने के लिए कुछ लिंक चाहते हैं, तो बस इन पैरामेट्स को न जोड़ें। सबसे अच्छा जवाब के रूप में बताया जाना चाहिए। धन्यवाद।

— ed1nh0

55

मैं एक ही समस्या थी, लेकिन दो बार bootstrap.js और jquery.jsफ़ाइलों को शामिल करने के कारण ।

एक क्लिक पर घटना को दो बार jquery उदाहरणों द्वारा संसाधित किया गया था। एक बंद हुआ और एक ने टॉगल खोला।

— raisercostin
स्रोत

3

मुझे ठीक वैसी ही समस्या थी लेकिन एहसास नहीं हुआ कि उन्हें दो बार शामिल किया जा रहा है। इसे पोस्ट करने के लिए धन्यवाद!

— ब्रायन ओनील

2

तो हमारा इंटर्न किया। इसे पोस्ट करने के लिए धन्यवाद।

— किशमिश

2

आदमी! मैंने वही किया - मुझे लगता है कि मैं एक प्रशिक्षु होने के लिए वापस आ गया हूँ!

— डेसर

2

इतना मददगार! मैं इस पर कई दिनों से काम कर रहा था। नेवले टेम्पलेट का उपयोग करते समय यह बहुत सामान्य हो सकता है। सावधान लोग! :)

— मैट बटलर

2

इसे सर्वश्रेष्ठ उत्तर के रूप में चिह्नित किया जाना चाहिए। मुझे बूटस्ट्रैप को हटाने में एक ही समस्या थी।

— जेएस

17

$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

इससे नेवी बार में ड्रॉप डाउन से निपटने में मदद मिलेगी

— चक्रधर व्यास
स्रोत

यह मेरी समस्या है जहाँ एक jssor स्लाइड शो से जावास्क्रिप्ट के साथ बूटस्ट्रैप का उपयोग मुद्दों को बनाया। यह कोड मोबाइल मेनू का विस्तार और पतन करते समय एक अच्छा प्रभाव भी बनाता है।

— एडम वेस्ट

धन्यवाद @ चक्रधर, इसने मेरा समय बचाया।

— उमर बाहिर

धन्यवाद, भूल गए कि लारवेल 5.5 JS में मुख्य js फ़ाइल में B और Jquery शामिल हैं।

— जैक शीशी

12

मैं बूटस्ट्रैप 4, अल्फा -6, और जोकिम जोहानसन के उत्तर के साथ इसी तरह के मुद्दे रहा / रही हूं, उन्होंने मुझे सही दिशा में शुरू किया। कोई जावास्क्रिप्ट की आवश्यकता है। डेटा-टारगेट डालना = "। नेवबर-पतन" और डेटा-टॉगल = "पतन" को नौसेना के अंदर div टैग में, लेकिन लिंक / बटन के आसपास, मेरे लिए काम किया।

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>

स्निपेट का विस्तार करें

— पॉल
स्रोत

आपकी पोस्ट ने मुझे बहुत मदद की। इसने इसे मेरे लिए हल किया <शरीर डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "। नवबार-पतन">

— डेसस

यह 3 साल पहले ही पोस्ट किया गया था। इसके अतिरिक्त, यह गैर-मोबाइल दृश्य में एनीमेशन को तोड़ता है।

— Bevor

6

मुझे पता है कि यह सवाल बूटस्ट्रैप 3 के लिए है, लेकिन अगर आप बूटस्ट्रैप 4 के लिए समाधान देख रहे हैं , तो बस यह करें:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});

— सैयद
स्रोत

मैं बीएस 4 बीटा का उपयोग कर रहा हूं और आपका कोड पूरी तरह से काम करता है। मैंने बिना किसी भाग्य के अन्य सभी सुझाए गए समाधानों की कोशिश की। बीएस 4 स्पष्ट रूप से पर्याप्त बदल गया है कि अन्य समाधान अभी लागू नहीं होते हैं।

— साइकिल डेव

प्रासंगिकता के लिए और अद्यतन जानकारी के साथ चीजों को समवर्ती रखने के लिए - यह सबसे अच्छा जवाब होना चाहिए।

— रिकी

@ रेकी ओपी ने बूटस्ट्रैप 3 निर्दिष्ट किया, न कि 4.

— मालवोस

ड्रॉप-डाउन वाले मेनू के लिए मैंने इसका इस्तेमाल किया:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }

— जेम्स विल्किंस

5

मुझे वही समस्या थी, मैं उपयोग कर रहा था jQuery-1.7.1और bootstrap 3.2.0। मैंने अपने jQuery संस्करण को नवीनतम ( jquery-1.11.2) संस्करण में बदल दिया और सब कुछ अच्छी तरह से काम करता है।

— Densol
स्रोत

5

मैंने किया

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});

— weaveoftheride
स्रोत

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

— चिट
स्रोत

इसे नए संस्करण मथायस एस :-)

— चित

@bfontaine सबसे पहले, आपको अपने मेनू डिव में id जोड़ना होगा, और जब आप अपने मेनू पर क्लिक करेंगे तो उसके बाद सभी मेनू छुप जाएंगे। उदाहरण के लिए: - जब आप हमारे बारे में मेनू पर क्लिक करेंगे तो बाकी मेनू टैब छिप जाएगा।

— चिट

1

धन्यवाद, लेकिन कृपया अपने उत्तर में यह लिखें ;)

— bfontaine

1

यदि आप मैन्युअल रूप से इस व्यवहार को ओवरराइड करके कॉल करना चाहते हैं तो .collapse ('hide') कोणीय निर्देश के भीतर, यहाँ कोड है:

जावास्क्रिप्ट फ़ाइल:

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

एचटीएमएल:

<li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>

— मिरना डी जीसस
स्रोत

1

कृपया सुनिश्चित करें कि आप नवीनतम बूटस्ट्रैप js संस्करण का उपयोग कर रहे हैं। मैं एक ही समस्या का सामना कर रहा था और बस बूटस्ट्रैप.जेएस फाइल को बूटस्ट्रैप-3.3.6 से अपग्रेड कर रहा था।

— अमन अरुण
स्रोत

1

यदि आप केवल अपने नेविगेशन को टॉगल करना चाहते हैं जब मोबाइल स्क्रीन पर उपयोग किया जाता है, तो बस जोड़ना data-toggle="collapse"औरdata-target="#navbar" आपके तत्वों को मोबाइल स्क्रीन पर काम करना होगा, लेकिन डेस्कटॉप स्क्रीन पर क्लिक करने पर आपको एक अजीब झिलमिलाहट देगा। यदि आप ऑरेलिया या कोणीय वातावरण में हैं, तो jQuery समाधान अच्छी तरह से काम नहीं करता है।

मेरे लिए सबसे अच्छा समाधान एक कस्टम विशेषता बनाना था जो संबंधित मीडिया क्वेरी को सुनता है और data-toggle="collapse"यदि वांछित हो तो विशेषता में जोड़ता है :

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

ऑरेलिया के साथ कस्टम विशेषता इस तरह दिखती है:

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 पर प्रेरणा के लिए लिंक । मैं बूटस्ट्रैप का नेबर-नेबार-फिक्स्ड-टॉप के साथ पतन और हैमबर्गर टॉगल का उपयोग कर रहा हूं। यहाँ jsfiddle पर मेरा संस्करण है: jsfiddle स्क्रॉलस्पी नेबार । मैं केवल getbootsrap.com पर निर्देशों का उपयोग करके बुनियादी कार्यक्षमता प्राप्त कर रहा था। मेरे लिए, समस्या ज्यादातर अस्पष्ट दिशाओं और जेएस में थी, जो गेटबूटस्ट्रैप साइट द्वारा अनुशंसित थी। सबसे अच्छी बात यह थी कि इस अतिरिक्त बिट js को जोड़ना (जिसमें उपरोक्त थ्रेड्स में वर्णित कुछ चीज़ों को शामिल किया गया है) ने मेरे लिए कई स्क्रॉलपीस मुद्दों को हल किया:

टूटा हुआ / टॉगल किया हुआ नेवी मेन्यू तब छिप जाता है जब नेवी "सेक्शन" (जैसे href = "# फोब्बर") पर क्लिक किया जाता है (इस थ्रेड को संबोधित करते हुए इश्यू)।
सक्रिय "अनुभाग" को सफलतापूर्वक हाइलाइट किया गया था (यानी। js सफलतापूर्वक बनाया गया वर्ग = "सक्रिय")
ध्वस्त नौसेना (केवल छोटे स्क्रीन पर) पर पाया गया ऊर्ध्वाधर स्क्रॉल बार समाप्त हो गया।

नोट: नीचे दिखाए गए js कोड में (मेरी पोस्ट के दूसरे jsfiddle लिंक से):

topMenu = $ ("# myScrollspy"),

... मान "myScrollspy" को आपके HTML में इस तरह से आईडी = "" से मेल खाना चाहिए ...

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

बेशक आप उस मूल्य को बदल सकते हैं जो आपको पसंद है।

— एडम कैलिहमान
स्रोत

0

आपको केवल डेटा-टारगेट = "नौबहार-पतन" बटन की आवश्यकता है, और कुछ नहीं।

<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: यह डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "जोड़कर भी काम करता है। नेबर-पतन" को <a /> या मेरे मामले में <Link /> Meteorjs में React के साथ, धन्यवाद।

— जो एल

हाँ, यह साथ काम करता है, <a/>लेकिन इसके साथ काम नहीं किया <NavLink/>, यह ढह जाता है लेकिन, <NavLink/>कोई और काम नहीं कर रहा है, किसी भी विचार क्यों?

— पिरामिड

0

यह वह कोड है जो मेरे लिए काम करता है:

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})

— रोड्डी पी। कार्बनेल
स्रोत

0

मुझे एक ही समस्या थी, यह सुनिश्चित करें कि bootstrap.js आपके html पृष्ठ में शामिल है। मेरे मामले में मेनू खुल गया, लेकिन बंद नहीं हुआ। जैसे ही मैंने बूटस्ट्रैप js फ़ाइल शामिल की, सब कुछ बस काम कर गया।

— Elitmiar
स्रोत

0

सरल ड्रॉपडाउन पतन वर्ग के लिए जावास्क्रिप्ट में एक समारोह बनाने की कोशिश करें।

उदाहरण:

जेएस :

$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 बूटस्ट्रैप.min.js से पहले लोड हो रहा था। इसलिए मैंने उन 2 फाइलों के क्रम को उलट दिया और अपना मेनू तय किया। अब निर्दोष रूप से चलता है। आशा करता हूँ की ये काम करेगा

— Vasko
स्रोत

0

समस्या यह हो सकती है कि आप बूटस्ट्रैप या jquery के पुराने संस्करणों का उपयोग कर रहे हैं, या आप अपने मार्कअप में एक से अधिक संस्करण कॉल कर रहे हैं।

बस नवीनतम संस्करण रखें, आपको केवल एक संदर्भ की आवश्यकता है। समस्या हल करता है।

— छेद
स्रोत

0

आप बस यह सुनिश्चित करना चाहते हैं कि आप अपने jQuery और Bootstrap.min.js ATF को लोड कर रहे हैं। आपका नेविगेशन पृष्ठ पर रेंडर करने के लिए पहली चीज़ है, इसलिए यदि आपके पास आपके HTML के नीचे आपकी स्क्रिप्ट हैं, तो आप किसी भी जावास्क्रिप्ट कार्यक्षमता को खो रहे हैं।

— क्रिस जॉनसन
स्रोत

0

मेरा मोबाइल पर केवल एक ही मुद्दा था लेकिन एक कोणीय अनुप्रयोग के लिए और मैंने यही किया:

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

मेरा मेनू एक नावबार मानक एक नहीं है, लेकिन मैं एक "ऑनक्लिक" फ़ंक्शन और एक ".क्लिक ()" का उपयोग करते हुए, ऑटो पतन खदान में कामयाब रहा।

<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

— ब्रावो स्टीफन
स्रोत