jquery - क्लिक पर ट्विटर बूटस्ट्रैप एनएवी पतन छुपाएं




html twitter-bootstrap (20)

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

एचटीएमएल में जोड़ें

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

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

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

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

उत्तरदायी मेनू से एक श्रेणी का चयन करके (टेम्पलेट केवल एक पृष्ठ है), मैं क्लिक करते समय स्वचालित रूप से नेविगेशन पतन को छिपाना चाहता हूं। नेविगेशन के रूप में भी उपयोग करने के लिए टहलने के बाद, क्योंकि टेम्पलेट में केवल एक पृष्ठ है। मैं ऐसे समाधान की तलाश करता हूं जो इसे प्रभावित न करे, यहां मेनू का 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 -->

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

<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


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

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click() //bootstrap 3.x by Richard
});

इसे> बूटस्ट्रैप 3 आज़माएं

मैं जो खोज रहा था उससे काफी शानदार, हालांकि मुझे जावास्क्रिप्ट और बूटस्ट्रैप मोडल के साथ कुछ संघर्ष हुए, यह तय किया गया।

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

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


टैग <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>

डुप्लीकेट कोड की चाटना के बिना और भी सुरुचिपूर्ण, केवल 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() माध्यम से क्लिक इवेंट बबलिंग को रोक नहीं रहे हैं, जब उपयोगकर्ता e.stopPropagation() पर क्लिक करते हैं।


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

<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 उपयोगकर्ता दिए गए कोड को आज़माएं। यह मेरे लिए काम किया।

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

बूटस्ट्रैप 3.3.6 पर परीक्षण - काम है!

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


बूटस्ट्रैप एनीमेशन ट्रिगर करने के लिए संकुचित तत्व पर एक .in वर्ग सेट करता है - इसे खोलने के लिए। यदि आप बस .in वर्ग को हटाते हैं, तो एनीमेशन नहीं चलता है, लेकिन तत्व को छुपाएगा - बिल्कुल वही नहीं जो आप चाहते हैं।

यदि डिफ़ॉल्ट बूटस्ट्रैप क्लास .in को तत्व पर सेट किया गया है, तो यह जांचने के लिए एक if कथन चलाने के लिए तेज़ी से तेज़ है।

तो यह कोड बस कहता है:

अगर मेरे तत्व में कक्षा है .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');
    }
})

मैं एक निश्चित शीर्ष नौसेना के साथ fullPage.js का उपयोग कर बूटस्ट्रैप 4 पर हूं, और मिश्रित परिणामों के साथ यहां सूचीबद्ध सब कुछ करने की कोशिश की।

  • सबसे अच्छा, साफ तरीका कोशिश की:

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

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

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

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

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


मैं बस इस तरह के प्रत्येक लिंक पर data-toggle="collapse" data-target=".nav-collapse.in" ( data-toggle="collapse" data-target=".nav-collapse.in" ) के 2 विशेषताओं को 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>

बूटस्ट्रैप 4 Navbar में , show लिए बदल गया है तो वाक्यविन्यास होगा:

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


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

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

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


मोबाइल व्यू: बूटस्ट्रैप में टॉगल नेविगेशन को कैसे छिपाना है + ड्रॉपडाउन + jquery + 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" );
}

(उपरोक्त योगदानकर्ताओं में से एक के लिए kudos)

इस तरह (इसे स्क्रॉल दोनों में जोड़ा जाना चाहिए)

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

यदि आप इसे क्रिया में देखना चाहते हैं तो बस इसे रिक्यूरो दाती दा NAS देखें


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

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


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

$(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').click(function () {
    $('.navbar-collapse').collapse('hide');
});


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

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


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




twitter-bootstrap