ক্লিক করে টুইটার বুটস্ট্র্যাপ ন্যাভ ডাউন করুন লুকান

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
@ WooCaSh বরং তাদের সমাধানের কাস্টম.জেএস এর ক্রমটি কাজ করেছিল, আমি লক্ষ্য করেছি $ ('নাভ এ')। ('ক্লিক', ফাংশন () {এবং আমার ক্ষেত্রে এটি একটি শ্রেণি, তারপরে $ ('। নাভ এ')। ('ক্লিক', ফাংশন () {। ধন্যবাদ, আপনি আমাকে অনেক সাহায্য করেছেন!
— টিম ভিজিটর
— chrylis -cautiouslyoptimistic-
আপনি যদি এই সমস্ত সমাধানগুলি নিজেই এখানে চেষ্টা করতে এবং তুলনা করতে না চান তবে এই উত্তরটি থেকে 1 টি সম্পাদনা করুন আপনার কী করা উচিত।
— কাও
আপনি আমার উত্তরটি এখানে দেখতে পেলেন stackoverflow.com/questions/14248194/…
— উট

উত্তর:

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। এছাড়াও সবেমাত্র একটি "যুক্ত করার পরামর্শ দিয়েছেন"। to ('nav a') => $ ('। নাভ এ') এর আগে কোডটিতে। [ক্লাস নির্বাচক একটি বিন্দু অনুপস্থিত ছিল "।"]
— ক্লেইন ডিসিলভা
7
এফওয়াইআই, এটি সব ক্ষেত্রে কার্যকর হয় না। উইন্ডোটি যদি আকারযুক্ত হয় এবং এটি মোবাইল মেনু নিয়ে আসে তবে এটি ডিফল্টরূপে উন্মুক্ত হবে।
— অ্যান্ড্রু বোস
8
আপডেট: বুটস্ট্র্যাপ 3 এর জন্য সাধারণ নির্বাচকটি। নবার-টগল, সুতরাং $ ("। নভবার-টগল")। ক্লিক করুন ();
— রিচার্ড
41
এটি নভবারে সমস্যা সৃষ্টি করছে। Use ('। নাভ-ধস') ব্যবহার করা ভাল collapse টগল বোতামটি ক্লিক করার পরিবর্তে ক্লিক ইভেন্টে ক্লিক করুন।
— রোহন
7
যখন নাবারটি "ডেস্কটপ" মোডে খোলা থাকে এটি ঝাঁকুনি বা বন্ধ হয়ে যাবে তখন এটি ব্যবহার করার সময় আবার খোলা হবে।
— mlapaglia
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
@ জেমসব্রেওয়ার ডেস্কটপ সংস্করণে ধসের অ্যানিমেশন এড়াতে .inডেটা-টার্গেট যুক্ত করুন:data-toggle="collapse" data-target=".nav-collapse.in"
— ডাগল
23
বুটস্ট্র্যাপ 3 এর জন্য। নবর-পতনের সাথে .নব-পতনটি প্রতিস্থাপন করতে ভুলবেন না
— কুশেরাম
3
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত! পোষ্টটির জন্য আপনাকে ধন্যবাদ!
— ত্রৈমাসিক
60 
$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});
— user2883298
সূত্র
6
এটি একটি আরও ভাল সমাধান, কারণ লিঙ্কগুলি দৃশ্যমান হলে এটি কোনও ত্রুটি প্রতিরোধ করে।
— ব্রুনো ডায়াস
বুটস্ট্র্যাপ 4 এ, এটি .navbar-toggler। যাইহোক, সুপার ওয়ার্কিং কোড, ধন্যবাদ!
— এক্সডিজি
45

ডিফল্ট পতন.জেএস পদ্ধতিগুলি ব্যবহার করা আরও ভাল ( ভি 3 ডক্স , ভি 4 ডক্স ):

$('.nav a').click(function(){
    $('.nav-collapse').collapse('hide');
});
— ভাদিম পি।
সূত্র
4
ক্লিক ফাংশন ব্যবহার করার চেয়ে অবশ্যই আরও ভাল! আপনি যে পরিবর্তনগুলি পরিবর্তন করতে চান তার সাথে কেবল আলাপচারিতার মাধ্যমে সর্বনিম্ন ঝুঁকি রাখা ভাল। একটি ক্লিক ইভেন্টের ফলে অতিরিক্ত অযাচিত ফাংশনগুলি সম্পাদন করতে পারে। এই পতন পদ্ধতি সম্পর্কে জানতাম না, ধন্যবাদ।
— অ্যান্ড্রু
1
এটি আমি এখনও অবধি খুঁজে পাওয়া সেরা সমাধান। ধন্যবাদ. আমি কিছুটা উন্নতি করেছি: .nav aনির্বাচককে এটি দ্বারা প্রতিস্থাপন করুন :.nav a:not(.dropdown-toggle)
— 12
আমার জন্য, আমার বুটস্ট্র্যাপ 4 উদাহরণ পৃষ্ঠায়, পরিবর্তে .nav aআমাকে ব্যবহার করতে হয়েছিল.navbar a
— alexandre1985
মানে .navbar-collapseনা আর না .nav-collapse?
— ভলমাইক
না, আমি না, কারণ .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>

এই সাধারণ পরিবর্তনটি আমার পক্ষে কাজ করেছিল।

রেফ: 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
— এএমই
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ইভেন্টে আমার সেগুলি বন্ধ করা দরকার ।
— অষ্টম
4

আমি মনে করি ডিফল্ট বুটস্ট্র্যাপ 3 এর পতন.জেএস পদ্ধতিগুলি ব্যবহার করা ভাল.navbar-collapse নীচের চিত্রের মতো যেটি সঙ্কুচিত উপাদানগুলি আপনি আড়াল করতে চান তা ।

অন্যান্য সমাধানগুলি আপনার ওয়েব পৃষ্ঠায় যেভাবে উপাদানগুলি প্রদর্শন করে বা কার্য করে তা নিয়ে অন্যান্য অনাকাঙ্ক্ষিত সমস্যার কারণ হতে পারে। অতএব, কিছু সমাধান আপনার প্রাথমিক সমস্যাটিকে ঠিক করার জন্য উপস্থিত হতে পারে এটি অন্যকে খুব ভালভাবে পরিচয় করিয়ে দিতে পারে, সুতরাং নিশ্চিত হয়ে নিন যে কোনও স্থিরতার পরে আপনি আপনার সাইটের নিখুঁত পরীক্ষা চালাচ্ছেন।

এই কোডটি কার্যত দেখতে:

  1. নীচে "এই কোড স্নিপেট চালান" টিপুন।
  2. "সম্পূর্ণ পৃষ্ঠা" বোতাম টিপুন।
  3. ড্রপ-ডাউন সক্রিয় না হওয়া পর্যন্ত স্কেল উইন্ডো।
  4. তারপরে একটি মেনু অপশনটি নির্বাচন করুন এবং ভয়েলা!

চিয়ার্স!

কোড স্নিপেট দেখান

— ফ্রান্সিসকাস অগ্নিউ
সূত্র
এটি বর্তমানে গৃহীত উত্তরের চেয়ে অনেক ভাল। এটির সাথে আমি ডেস্কটপে ভুতের অ্যানিমেশন পাই।
— কোডি
3

প্রতিটি ড্রপডাউন লিঙ্কে ডেটা-টগল = "বিপর্যয়" এবং ডেটা-টার্গেট = "রেখে দিন nav

<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

ট্যাগে ডেটা-টগল = "পতন" ডেটা-টার্গেট = "। 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>
— ARV
সূত্র
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');
});

এই সমস্যার একটি সহজ সমাধান হ'ল কেবল 'ইন' এর উপস্থিতি যাচাই করে ধসে পড়া ন্যাবারকে উল্লেখ করা:

$('.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% কাজ করছে: -

এইচটিএমএলে যুক্ত করুন

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

এইচটিএমএল:

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

আমি এটি একক পৃষ্ঠাগুলিতে পছন্দ করি কারণ আমি লোকালস্ক্রোল.জে ব্যবহার করি যা ইতিমধ্যে অ্যানিমেশন।

— andreaslarsen.dk
সূত্র
0

মোবাইল ভিউ: বুটস্ট্র্যাপ + টপল নেভিগেশন কীভাবে আড়াল করতে যায় + ড্রপডাউন + জ্যাকোয়ারি + একই পৃষ্ঠায় অ্যাঙ্কার / আইডিকে নির্দেশ করে এমন ন্যাভিগেশন আইটেম সহ স্ক্রোলটো , এক পৃষ্ঠার টেম্পলেট

উপরের যে কোনও সমাধানের জন্য আমি যে সমস্যাটি পরীক্ষা করছিলাম সেটি হ'ল তারা কেবল সাবমেনু আইটেমগুলিকেই ভেঙে ফেলছে, যখন নেভিগেশন মেনুটি ধসে পড়ে না।

সুতরাং আমি আমার চিন্তা কি .. এবং আমরা কী পর্যবেক্ষণ করতে পারি? ঠিক আছে, প্রতিবার আমরা / ব্যবহারকারীরা কোনও স্ক্রোলটো লিঙ্কে ক্লিক করলে, আমরা পৃষ্ঠাটি সেই অবস্থানটিতে এবং সমসাময়িকভাবে স্ক্রোল করতে চাই, পৃষ্ঠা দর্শনটি পুনরুদ্ধার করতে মেনুটি ভেঙে দিন।

আচ্ছা ... স্ক্রোলটো ফাংশনে এই কাজটি বরাদ্দ করা হচ্ছে না কেন? সহজ :-)

সুতরাং দুটি কোড

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

আপনি যদি এটিকে অ্যাকশনে দেখতে চান তবে এটি পরীক্ষা করে দেখুন NAS পুনরুদ্ধার করুন

— রবার্ট
সূত্র
0

বুটস্ট্রা ৩.৫ ব্যবহারকারীরা নীচের কোডটি ব্যবহার করে দেখুন। এটা আমার জন্য কাজ করেছে।

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উপাদানটিতে সেট করা আছে কিনা তা যাচাই করতে একটি বিবৃতি চালানো সম্ভবত দ্রুত faster

সুতরাং এই কোডটি কেবল বলেছেন:

যদি আমার এলিমেন্টটি ক্লাস .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

বুটস্ট্র্যাপ ৩ এর জন্য আরও একটি দ্রুত সমাধান * * হতে পারে:

$( 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 একটি অরেলিয়া বা কৌণিক পরিবেশে বোনা কাজ করে না।

আমার জন্য সর্বোত্তম সমাধানটি হ'ল একটি কাস্টম অ্যাট্রিবিউট তৈরি করা যা সংশ্লিষ্ট মিডিয়া ক্যোয়ারী শোনায় এবং 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 এ আছি এবং মিশ্রিত ফলাফল সহ এখানে তালিকাভুক্ত সমস্ত কিছুই চেষ্টা করে দেখছি।

  • সবচেয়ে ভাল এবং পরিষ্কার উপায় চেষ্টা:

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

    টাচস্টার্ট ইভেন্টের কারণে কিছু অদ্ভুত আচরণ হবে: ক্লিক করা বোতামগুলি আসলে আমি ক্লিক করে এমনগুলি না হয়ে শেষ হয় তাই লিংকগুলি ভেঙে দেয়। প্লাস এটি আমার এনএভি-তে কিছু অন্য সম্পর্কযুক্ত ড্রপডাউনগুলিতে .শ্রেণীর ক্লাস যুক্ত করবে, যার ফলে আরও কিছু অদ্ভুত স্টাফ তৈরি হবে।

  • ডিভিটি লি-তে পরিবর্তনের চেষ্টা করেছিল
  • 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();
    }
});

পুরোপুরি কাজ করে।

— আমির শাহজাদ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.