क्लिक पर ट्विटर बूटस्ट्रैप नव पतन को छिपाएं

133

यह सबमेनू ड्रॉपडाउन नहीं है, चित्र में श्रेणी ली है:

यहाँ छवि विवरण दर्ज करें

उत्तरदायी मेनू से एक श्रेणी का चयन करके (टेम्पलेट सिर्फ एक पृष्ठ है), मैं क्लिक करते समय स्वचालित रूप से नव पतन को छिपाना चाहता हूं। नेविगेशन के रूप में उपयोग करने के लिए भी टहलें, क्योंकि टेम्पलेट में केवल एक पृष्ठ है। मैं एक समाधान चाहता हूं जो इसे प्रभावित न करे, यहां मेनू का 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 -->
jquery  html  twitter-bootstrap 
— टिम विटर
स्रोत
और मेरा समाधान काम कर रहा है या नहीं?
— वूक्साह
@WooCaSh ने काम किया बल्कि उनके समाधान का क्रम custom.js गलत था, मैंने $ ('नेव ए') पर गौर किया। ऑन ('क्लिक', फंक्शन) () {और मेरे मामले में यह एक क्लास है, तो $ ('। नेवी ए')। ('क्लिक', फंक्शन) () {धन्यवाद, आपने मेरी बहुत मदद की!
— टिम विटर
— chrylis -cautiouslyoptimistic-
यदि आप स्वयं इन सभी समाधानों की कोशिश और तुलना नहीं करना चाहते हैं, तो इस उत्तर से # 1 संपादित करें कि आपको क्या करना चाहिए।
— caw
आप मेरा जवाब यहां देख सकते हैं stackoverflow.com/questions/14248194/…
— Camel

जवाबों:

165

इसे इस्तेमाल करे:

$('.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
});
— WooCaSh
स्रोत
1
इसने बहुत अच्छा काम किया। धन्यवाद WooCaSh। साथ ही सिर्फ एक "" जोड़ने का सुझाव दिया। $ ('एन ए') => $ ('एन ए ए') से पहले कोड के लिए। [क्लास सिलेक्टर को एक बिंदु याद आ रहा था ""।]
— क्लैन डीसिल्वा
7
FYI करें, यह सभी मामलों में काम नहीं करता है। यदि विंडो फिर से आकार में है और यह मोबाइल मेनू लाता है तो यह डिफ़ॉल्ट रूप से खुला होगा।
— एंड्रयू बोस
8
अद्यतन: बूटस्ट्रैप 3 के लिए सामान्य चयनकर्ता .navbar- टॉगल है, इसलिए $ ("नावबार-टॉगल"); क्लिक करें ();
— रिचर्ड
41
यह नौबत में मुद्दे पैदा कर रहा है। $ ('नव-पतन') का उपयोग करने के लिए बेहतर है। ढहना ('छिपाना'); टॉगल बटन क्लिक करने के बजाय क्लिक इवेंट पर।
— रोहन
7
जब नेवबार "डेस्कटॉप" मोड में खुला होता है तो यह झिलमिलाहट या बंद हो जाएगा जब इसे इस्तेमाल करते समय फिर से खोलना होगा।
— म्लापाग्लिया
134

मैं इस तरह से प्रत्येक लिंक पर btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in") की 2 विशेषताओं को दोहराता हूं :

<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 नेवबार , inकरने के लिए बदल गया है showतो वाक्य रचना होगा:

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

— Zu1779
स्रोत
13
जोड़ना data-toggleऔर data-target<li> क्लीनर समाधान है। धन्यवाद।
— ट्रेंटो
9
मोबाइल पर अच्छी तरह से काम करता है, लेकिन डेस्कटॉप पर भी नावबार के पतन का कारण बनता है, जो अवांछनीय है।
— जेम्स ब्रूवर
34
@JamesBrewer डेस्कटॉप वर्जन पर पतन के एनीमेशन से बचने के .inलिए डेटा-टारगेट में जोड़ें :data-toggle="collapse" data-target=".nav-collapse.in"
— Daghall
23
.Nav-पतन के साथ .navbar-पतन को बूटस्ट्रैप 3 के लिए बदलना न भूलें
— kuceram
3
यह स्वीकृत उत्तर होना चाहिए! इसे पोस्ट करने के लिए धन्यवाद!
— त्रिकुर
60 
$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});
— user2883298
स्रोत
6
यह एक बेहतर समाधान है, क्योंकि यह लिंक दिखाई देने पर एक गड़बड़ को रोकता है।
— ब्रूनो डायस
बूटस्ट्रैप 4 पर, यह .navbar-toggler। वैसे भी, सुपर वर्किंग कोड, धन्यवाद!
— Xdg
45

डिफ़ॉल्ट ढहने के तरीकों का उपयोग करने के लिए बेहतर है ( V3 डॉक्स , V4 डॉक्स ):

$('.nav a').click(function(){
    $('.nav-collapse').collapse('hide');
});
— वदिम पी।
स्रोत
4
क्लिक फ़ंक्शन का उपयोग करने से निश्चित रूप से बेहतर है! केवल उन चीजों के साथ बातचीत करके, जिन्हें आप बदलना चाहते हैं, न्यूनतम जोखिम रखना सबसे अच्छा है। एक क्लिक ईवेंट अतिरिक्त अवांछित कार्यों को निष्पादित करने का कारण बन सकता है। इस पतन विधि के बारे में पता नहीं था, धन्यवाद।
— एंड्रयू
1
यह अब तक का सबसे अच्छा समाधान है। धन्यवाद। बस थोड़ा सा सुधार मैंने किया: .nav aचयनकर्ता को इसके द्वारा प्रतिस्थापित करें :.nav a:not(.dropdown-toggle)
— mneute
मेरे लिए, मेरे बूटस्ट्रैप 4 उदाहरण पृष्ठ पर, इसके बजाय .nav aमुझे उपयोग करना था.navbar a
— alexandre1985
क्या आपका मतलब .navbar-collapseऔर नहीं है .nav-collapse?
— Volomike
नहीं, मैं नहीं, क्योंकि .nav-collapseप्रश्न कोड उदाहरण में इस्तेमाल किया गया था।
— वादिम पी।
32

डुप्लिकेट कोड की एक चाट के बिना और भी सुरुचिपूर्ण, केवल नौसेना के लिए 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>

सुपर क्लीन, कोई जावास्क्रिप्ट आवश्यक नहीं है। जब तक आपके nav aतत्व वसा उंगलियों के लिए पर्याप्त पर्याप्त पैडिंग हैं , तब तक बढ़िया काम करता है , और e.stopPropagation()जब उपयोगकर्ता nav aआइटम पर क्लिक करते हैं, तो आप क्लिक ईवेंट बुदबुदाहट को रोक नहीं सकते हैं ।

— purefusion
स्रोत
1
यह इस व्यवहार को पूरा करने का उचित बूटस्ट्रैप तरीका है।
— apenasVB
2
मैं लक्ष्य को संशोधित शामिल करने के लिए सुझाव है कि में के रूप में अच्छी तरह से वर्ग। यह डेस्कटॉप संस्करणों को अजीब तरह से व्यवहार करने से रोकेगा। data-target=".nav-collapse.in"
— डेव
इसके बारे में अच्छी बात यह है कि यह कोणीय 4 के राउटरलिंक के साथ काम करता है जबकि अन्य समाधान नहीं करते हैं!
— stt106
1
बूटस्ट्रैप 4 में यह होगा<div class="collapse navbar-collapse" data-toggle="collapse" data-target=".navbar-collapse">
— जोशो
17

अपना अपडेट करें 

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

सेवा 

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

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

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

— FullStackDev
स्रोत
1
यह स्वीकृत उत्तर होना चाहिए। पूरी तरह से मानक बूटस्ट्रैप सम्मेलनों के साथ काम करता है।
— ब्रैडली
1
माना। इसे पूरा करने का यह सही तरीका है। JQuery की कोई जरूरत नहीं मुझे समझ में नहीं आता है कि इसने इतना अधिक उत्थान / ध्यान क्यों प्राप्त किया है।
— वाहवाह्व
"मानक" विज़ुअल स्टूडियो मास्टर पृष्ठ पर, यह बर्गर मेनू के गायब होने और मेनू के किसी भी विकल्प के परिणामस्वरूप होगा। यह उत्तर केवल एक विशिष्ट मेनू कॉन्फ़िगरेशन लेआउट के साथ काम करता है (जो आप एक उदाहरण के रूप में प्रदान नहीं करते हैं)।
— कोडिंग किया गया
1
यह अब काम नहीं करेगा। data-target=".navbar-collapse.in"नए बूटस्ट्रैप मानक के साथ उपयोग करें । .inवर्ग एनीमेशन रोकने के लिए है जब डेस्कटॉप पर
— फिलिप oghenerobo Balogun
मैंने अपनी स्थिति में इस समाधान का उपयोग किया है, लेकिन पैरामीटर के div.navbar-collapseरूप में मेरे तत्व की आईडी का उपयोग किया है data-target।
— मैक्सथौसेंड
13

किसी भी समय उपयोगकर्ता को शरीर पर कहीं भी क्लिक करने पर नेविगेशन बंद होना चाहिए - न कि केवल नेविगेशन तत्व। मान मेनू खुला है, लेकिन उपयोगकर्ता पेज बॉडी में क्लिक करता है। उपयोगकर्ता मेनू को करीब से देखने की अपेक्षा करता है।

आपको यह भी सुनिश्चित करना होगा कि टॉगल बटन दिखाई दे, अन्यथा मेनू में एक छलांग दिखाई देती है।

$(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.
— AME
7

यह प्रयास करें> बूटस्ट्रैप 3

शानदार रूप से मैं क्या देख रहा था, हालांकि मुझे जावास्क्रिप्ट और बूटस्ट्रैप मोडल के साथ कुछ झड़पें हुईं, इसने इसे ठीक कर दिया। 

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

उम्मीद है की यह मदद करेगा।

— Getsomepeaches
स्रोत
6

इसने मेरे लिए अच्छा काम किया। इसका स्वीकार किए गए उत्तर के समान है लेकिन डेस्कटॉप / टैबलेट दृश्य से संबंधित समस्या को ठीक करता है

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth <= 768) {
            $(".navbar-toggle").click();
        }
    });
स्निपेट का विस्तार करें

— MichaelMcCabe
स्रोत
window.innerWidth <= 767 बेहतर है;) या window.innerWidth <768
— एलेक्स टेप
इसे शीर्ष उत्तर के रूप में चुना जाना चाहिए। हालाँकि, यह ड्रॉप डाउन के साथ काम नहीं करता है। मैंने इसे चयनकर्ता के साथ प्रतिस्थापित करके तय किया: $ ('।
— नवबार
6 

$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});
स्निपेट का विस्तार करें

— जगदीश सिंह
स्रोत
यह मेरे लिए काम करता है। मेरे पास हर कैंडो दृश्य पर एक नावबार है, इसलिए मुझे उन्हें beforeShowघटना पर बंद करने की आवश्यकता है ।
— xinthose
4

मुझे लगता है कि डिफ़ॉल्ट बूटस्ट्रैप 3 के पतन का उपयोग करना बेहतर है .navbar-collapse। नीचे बताए गए अनुसार आप जिस संक्षिप्तता तत्व को छिपाना चाहते हैं, उसका उपयोग करना।

अन्य समाधान आपके वेब पेज में तत्वों के प्रदर्शन या कार्य करने के तरीके के साथ अन्य अवांछित समस्याओं का कारण हो सकते हैं। इसलिए, जबकि कुछ समाधान आपकी प्रारंभिक समस्या को ठीक करने के लिए प्रकट हो सकते हैं, यह बहुत अच्छी तरह से दूसरों को पेश कर सकता है, इसलिए सुनिश्चित करें कि आप किसी भी फिक्स के बाद अपनी साइट का पूरी तरह से परीक्षण चलाते हैं।

इस कोड को कार्रवाई में देखने के लिए:

  1. नीचे "यह कोड स्निपेट चलाएँ" दबाएं।
  2. "पूर्ण पृष्ठ" बटन दबाएं।
  3. ड्रॉप-डाउन सक्रिय होने तक स्केल विंडो।
  4. फिर एक मेनू विकल्प और वोइला का चयन करें!

चीयर्स!

कोड स्निपेट दिखाएं

— फ्रांसिस्कस एन्न्यू
स्रोत
वर्तमान में स्वीकृत उत्तर की तुलना में यह बहुत बेहतर है। उस एक के साथ, मुझे डेस्कटॉप पर भूत एनिमेशन मिलते हैं।
— कोड़ी
3

प्रत्येक ड्रॉपडाउन लिंक पर डेटा-टॉगल = "पतन" और डेटा-लक्ष्य = "डालें। नव-पतन" जहां नव-पतन वह नाम है जिसे आप ड्रॉपडाउन सूची में देते हैं।

<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;
  }
}
— बोतेज़ अलेक्जेंड्रू
स्रोत
3

<a>मेरे लिए काम किए गए टैग में डेटा टॉगल = "पतन" डेटा-लक्ष्य = "। Navbar-collapse.in" जोड़ना ।

<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>
— एआरवी
स्रोत
2

यहाँ है कि मैं यह कैसे किया। अगर कोई आसान तरीका है, तो कृपया मुझे बताएं।

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

— user2502767
स्रोत
1 
$(function() {
    $('.nav a').on('click touchstart', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

// नोट मैंने मोबाइल टच के लिए "टचस्टार्ट" जोड़ा है। टचस्टार्ट / एंड में कोई देरी नहीं है

— APOUGHER
स्रोत
1

यह सबसे अच्छा समाधान है जिसका मैंने उपयोग किया है।

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

    });
— जुडसन टेरेल
स्रोत
1

जिन लोगों ने इस समाधान का उपयोग करते समय डेस्कटॉप नाविक झिलमिलाहट पर ध्यान दिया है:

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

उस समस्या का एक सरल समाधान केवल of इन ’की उपस्थिति की जाँच करके ध्वस्त किए गए नावबार को संदर्भित करना है:

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

यह डोम पर क्लिक किए गए लिंक के ऊपर ड्रॉपडाउन वर्ग की उपस्थिति के लिए दिखता है, अगर यह मौजूद है, तो लिंक ड्रॉप डाउन मेनू लॉन्च करने का इरादा था और परिणामस्वरूप मेनू छिपा नहीं है। जब आप ड्रॉपडाउन मेनू के लिंक पर क्लिक करते हैं, तो नेवबार सही तरीके से छिप जाएगा।

— एकल इकाई
स्रोत
1 
$("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');
  }
});
— טאבו ישראל ורות לקותות
स्रोत
1

100% काम कर रहे: -

HTML में जोड़ें

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

जावास्क्रिप्ट

 $(function(){ 
 var navMain = $("#myMenu");
 navMain.on("click", "a", null, function () {
     navMain.collapse('hide');
 });
});
— चिट
स्रोत
0

यह नेविगेट करने के बजाय इसे नष्ट कर देता है लेकिन उपरोक्त उत्तर के समान अवधारणा

जे एस:

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

HTML:

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

मैं इसे सिंगल पेज साइट्स पर पसंद करता हूं क्योंकि मैं पहले से ही एनिमेट करने वाले लोकलक्रॉस.ज का उपयोग करता हूं।

— andreaslarsen.dk
स्रोत
0

मोबाइल दृश्य: बूटस्ट्रैप में टॉगल नेविगेशन को कैसे छिपाया जाए + ड्रॉपडाउन + jquery + स्क्रॉलआउट के साथ नेविगेशन आइटम जो एक ही पृष्ठ पर एंकर / आईडी को इंगित करते हैं , एक पृष्ठ टेम्पलेट

समस्या मैं उपरोक्त किसी भी समाधान के साथ प्रयोग कर रहा था कि वे केवल सबमेनू आइटम को ढह रहे थे, जबकि नेविगेशन मेनू ध्वस्त नहीं होता है।

तो मैंने अपना विचार रखा .. और हम क्या देख सकते हैं? खैर, जब भी हम / उपयोगकर्ता एक स्क्रॉल लिंक पर क्लिक करते हैं, तो हम चाहते हैं कि पृष्ठ उस स्थिति पर स्क्रॉल करें और समकालीन रूप से, पृष्ठ दृश्य को पुनर्स्थापित करने के लिए मेनू को संक्षिप्त करें।

खैर ... क्यों नहीं इस काम को स्क्रॉलआउट फ़ंक्शंस में असाइन किया जाए? आसान :-)

तो दो कोड में

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

यदि आप इसे कार्रवाई में देखना चाहते हैं, तो इसे रिकुपरो डेटी दा एनएएस देखें

— रॉबर्ट
स्रोत
0

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);
— यश वेकारिया
स्रोत
0

बूटस्ट्रैप .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');
    }
})
— सीआर रौल्सन
स्रोत
0

प्रत्येक में एक आईडी जोड़ें 

<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>
— जेम्स
स्रोत
0

बूटस्ट्रैप 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
            }
        });
    });
});
— क्रिस्टी ड्रैगिसी
स्रोत
0

मैंने एक समाधान पोस्ट किया है जो यहाँ ऑरेलिया के साथ काम करता है: https://stackoverflow.com/a/41465905/6466378

समस्या यह है कि आप सिर्फ जोड़ नहीं सकते हैं data-toggle="collapse"औरdata-target="#navbar" अपने एक तत्व है। और jQuery Aurelia या Angular वातावरण में wenn काम नहीं करता है।

मेरे लिए सबसे अच्छा समाधान एक कस्टम विशेषता बनाना था जो संबंधित मीडिया क्वेरी को सुनता है और 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

मैं बूटस्ट्रैप 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');
});

मेरे पास पहले से ही उस हैशचेंज फ़ंक्शन में सामान था, सी मुझे सिर्फ इस लाइन को जोड़ना था।

यह वास्तव में वही करता है जो मैं चाहता हूं: जब हैश बदल जाता है तो मेनू को ढहाना (यानी एक क्लिक कहीं और होता है)। जो अच्छा है, क्योंकि मेरे पास अब मेरे मेनू में लिंक हो सकते हैं जो इसे ध्वस्त नहीं करेंगे।

कौन जानता है, शायद यह मेरी स्थिति में किसी की मदद करेगा!

और सभी को धन्यवाद जिन्होंने उस धागे में भाग लिया है, बहुत सारी जानकारी यहां सीखी जानी है।

— Paperjuice
स्रोत
0

ज्यादातर मामलों में आप केवल टॉगल फ़ंक्शन को कॉल करना चाहते हैं यदि टॉगल बटन दिखाई देता है ...

if ($('.navbar-toggler').is(":visible")) $('.navbar-toggler').click();
— EddieB
स्रोत
-1

मैंने चेक इन मेनू को 'क्लास' में चेक करके खोला है और फिर कोड रन किया है।

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

अच्छी तरह से काम।

— आमेर शहजाद
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.