বুটস্ট্র্যাপ 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

ইউজার 3669917 এর উত্তর অবশ্যই সবচেয়ে সহজ এবং সর্বাধিক সোজা সামনের উত্তর!

— থমাস

1

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

— নাভির

48

বুটস্ট্র্যাপের ডিফল্ট সেটিংস হ'ল আপনি যখন কোনও মেনু আইটেমে ক্লিক করেন তখন মেনুটি উন্মুক্ত রাখা হয়। আপনি .collapse('hide');যেই jQuery উপাদানটি ভেঙে যেতে চান তা কল করে আপনি ম্যানুয়ালি এই আচরণটি ওভাররাইড করতে পারেন।

— VCNinc
সূত্র

8

এটি ভুল, বুটস্ট্র্যাপ স্বয়ংক্রিয়ভাবে "পতন" শ্রেণি টগল করে। আপনার কোনও অতিরিক্ত জেকারি কোডের দরকার নেই। যদি আপনার এরকম আচরণ হয় তবে এর অর্থ এটি আপনার এইচটিএমএল কোডে কিছু ভুল হয়েছে (আমার অংশের জন্য আমি দু'বার jquery এবং বুটস্ট্র্যাপ অন্তর্ভুক্ত ছিলাম, @ রেজারকোস্টিনের উত্তর দেখুন)।

— রোমন

এই উত্তরটি সঠিক @ ডিফল্টরূপে লিঙ্কগুলি ক্লিক করার পরে বুটস্ট্র্যাপ মেনুটি বন্ধ করে না । অন্য উত্তরগুলি কেবল তখনই প্রযোজ্য যদি লোকেরা ভুলভাবে jQuery দুইবার অন্তর্ভুক্ত করে যা এই প্রশ্নের সঠিক উত্তর নয়।

— জিম

136

গিটহাবের সমাধানগুলি থেকে এটি ভাগ করে নেওয়ার জন্য, এটি ছিল জনপ্রিয় উত্তর:

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

নির্দোষভাবে কাজ করে। ভাগ করে নেওয়ার জন্য ধন্যবাদ!

— রদ্রিগো চিয়াং

আপনি '$ (এটি) .collapse (' hide ') ব্যাখ্যা করতে পারেন;' অনুগ্রহ. 'ধসে' কোথা থেকে আসে তা আমি বুঝতে পারি না

— টাইমব্যান্ড

@ ইমরান নাজির, দুঃখিত এই প্রশ্নের পরেও এটি collapseএকটি পদ্ধতি যা বুটস্ট্র্যাপ দ্বারা সংজ্ঞায়িত করা এবং jQuery অবজেক্টের সাথে সংযুক্ত ... সম্ভবত, তারা এটিকে একাধিক উদ্দেশ্যে (অ্যাকর্ডিয়ন, নাবার

— কেভিন নেলসন

আপডেট কোড আমার পক্ষে কাজ করেছে, এর উপরে উত্তরগুলি দেয় নি। ধন্যবাদ!

— র্যান্ডম ইউএস 1

"[আপডেট 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>

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

রেফ: https://github.com/twbs/bootstrap/issues/9013

— FullStackDev
সূত্র

14

এই দ্রষ্টব্যটি মোবাইল দর্শনের জন্য সূক্ষ্ম তবে এটি একবারে লিঙ্ক ক্লিক করলে বড় স্ক্রিনে প্রদর্শন / লুকিয়ে অ্যানিমেশন দেখায়।

— আয়মান আল-আবসি

22

@ AymanAl-Absi আপনি যোগ আছে .inশেষে data-targetমান: data-target=".navbar-collapse.in"। এই উত্তরে মন্তব্য থেকে: stackoverflow.com/a/21797534/89818

— কাঁচ

এটি আমার পক্ষে দুর্দান্ত কাজ করে তবে এটি স্ক্রোলস্পিটি ভেঙে দেয়, কোনও ধারণা কেন এমন হতে পারে?

— ক্রেগ হারলে

1

@ কেউ উত্তরের সাথে উপরের কোডটি আপডেট করার সময় আমার জন্য কাজ করেছেন। আমি স্ক্রোলস্পি বৈশিষ্ট্যটিও ব্যবহার করছি।

— নিরাজ

এটি এখন পর্যন্ত সেরা সমাধান is কোনও জাভাস্ক্রিপ্ট নেই, নেই jQuery। আপনি যদি মেনুটি খোলা রাখার জন্য নির্দিষ্ট লিঙ্ক চান তবে কেবল এই প্যারামগুলি যুক্ত করবেন না। সেরা উত্তর হিসাবে চিহ্নিত করা উচিত। ধন্যবাদ.

— ed1nh0

55

আমার একই সমস্যা ছিল তবে দু'বার bootstrap.js এবং jquery.jsফাইল অন্তর্ভুক্ত করে।

একক ক্লিকে ইভেন্টটি দু'বার জ্যাকোরি উদাহরণ দিয়ে প্রক্রিয়া করা হয়েছিল। একজন বন্ধ এবং একটি টগল খুলল।

— raisercostin
সূত্র

3

আমার ঠিক একই সমস্যা ছিল তবে বুঝতে পারি নি যে তারা দুবার অন্তর্ভুক্ত হচ্ছে। এই পোস্ট করার জন্য ধন্যবাদ!

— ব্রায়ান ওনিল

2

আমাদের ইন্টার্ন তাই। এই পোস্ট করার জন্য ধন্যবাদ।

— তিজমান

2

মানুষ! আমি একই জিনিসটি করেছি - আমার ধারণা আমি আবার ইন্টার্ন হয়ে ফিরে এসেছি!

— ডিকার

2

তাই সহায়ক! আমি কয়েক দিন ধরে এটি নিয়ে কাজ করে যাচ্ছিলাম। এটি একটি নেবারবার টেম্পলেট ব্যবহার করার সময় খুব সাধারণ হতে পারে। সাবধান মানুষ! :)

— ম্যাট বাটলার

2

এটি সেরা উত্তর হিসাবে চিহ্নিত করা উচিত। বুটস্ট্র্যাপ.জেএস অপসারণ করার ক্ষেত্রে আমার একই সমস্যা ছিল

— কাঠবেইকিবস

17

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

এটি এনএভি বারে ড্রপ ডাউন পরিচালনা করতে সহায়তা করবে

— চক্রধর ভাইজা
সূত্র

এটি আমার সমস্যার সমাধান করে যেখানে কোনও জাসরের স্লাইডশো থেকে জাভাস্ক্রিপ্টের সাথে বুটস্ট্র্যাপ ব্যবহার করে সমস্যাগুলি তৈরি করা হয়েছে। মোবাইল মেনুটি প্রসারিত ও সংকুচিত করার সময় এই কোডটি একটি দুর্দান্ত প্রভাবও তৈরি করে।

— অ্যাডাম ওয়েস্ট

ধন্যবাদ চক্রধার, এটি আমার সময় সাশ্রয় করেছে।

— ওমর বাহির

ধন্যবাদ, ভুলে গেছি যে লারাভেল 5.5 জেএসে মূল জেএস ফাইলগুলিতে বি এবং জ্যাকুরির অন্তর্ভুক্ত রয়েছে।

— জ্যাক ভায়াল

12

বুটস্ট্র্যাপ 4, আলফা -6 এর সাথে আমার একই রকম সমস্যা / সমস্যা রয়েছে এবং উপরে জোয়াকিম জোহানসনের উত্তর আমাকে সঠিক দিকে শুরু করেছে। কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই। ডেভেল-টার্গেট = "। নববার-ধস" এবং ডেটা-টগল = "বিপর্যয়" এনএভি-র ডিভ ট্যাগের মধ্যে রাখা, তবে লিঙ্কগুলি / বোতামগুলির চারপাশে আমার জন্য কাজ করেছিল।

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

স্নিপেট প্রসারিত করুন

— পল
সূত্র

আপনার পোস্ট আমাকে অনেক সাহায্য করেছে। এটি আমার জন্য সমাধান করেছে <বডি ডেটা-টগল = "ধস" "ডেটা-টার্গেট =" nav নাবার-পতন ">

— ডেসাস

এটি ইতিমধ্যে 3 বছর আগে পোস্ট করা হয়েছিল। অতিরিক্তভাবে, এটি অ-মোবাইল ভিউতে অ্যানিমেশনটি ভেঙে দেয়।

— বেভোর

6

আমি জানি এই প্রশ্নটি বুটস্ট্র্যাপ 3 এর জন্য তবে আপনি যদি বুটস্ট্র্যাপ 4 এর সমাধান খুঁজছেন তবে কেবল এটি করুন:

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

— সৈয়দ
সূত্র

আমি BS4 বিটা ব্যবহার করছি এবং আপনার কোড নিখুঁতভাবে কাজ করে। আমি এখানে ভাগ্য ছাড়া অন্য সমস্ত প্রস্তাবিত সমাধান চেষ্টা করেছি। BS4 স্পষ্টতই যথেষ্ট পরিবর্তন করেছে যে অন্যান্য সমাধান কেবল প্রয়োগ করে না।

— সাইকেল ডেভ

প্রাসঙ্গিকতার জন্য এবং আপডেট হওয়া তথ্যের সাথে জিনিসগুলিকে একযোগে রাখার জন্য - এটি সেরা উত্তর হওয়া উচিত।

— রিকি

@ রিকি ওপি বুটস্ট্র্যাপ 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>

(এইরকম উত্তর দেওয়ার জন্য দুঃখিত, এই উত্তরে একটি মন্তব্য যুক্ত করতে চেয়েছিলাম, তবে মনে হয় মন্তব্য করার মতো যথেষ্ট ক্রেডিট আমার নেই)

— উইম ভ্যান হাউস
সূত্র

2

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

— চিট
সূত্র

এটি নতুন সংস্করণ ম্যাথিয়াস এস :-)

— চিট

@fontaine প্রথম, আপনাকে আপনার মেনু ডিভিতে আইডি যুক্ত করতে হবে, এবং আপনি যখন আপনার মেনুতে ক্লিক করবেন তারপরে সমস্ত মেনু লুকিয়ে থাকবে। উদাহরণস্বরূপ: - আপনি যখন আমাদের সম্পর্কে মেনুতে ক্লিক করেন তখন বিশ্রামের মেনু ট্যাবটি আড়াল হয়ে যায়।

— চিট

1

তোমাকে ধন্যবাদ, কিন্তু যে অনুগ্রহ করে লিখুন মধ্যে আপনার উত্তর;)

— bfontaine

1

আপনি যদি একটি কৌণিক নির্দেশের মধ্যে .collapse ('গোপন') কল করে ম্যানুয়ালি এই আচরণটি ওভাররাইড করতে চান তবে কোডটি এখানে:

জাভাস্ক্রিপ্ট ফাইল:

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

দয়া করে নিশ্চিত হন যে আপনি সর্বশেষ বুটস্ট্র্যাপ জেএস সংস্করণ ব্যবহার করছেন। আমি একই সমস্যার মুখোমুখি হয়েছি এবং বুটস্ট্র্যাপ -৩.৩..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 সেরা সমাধান solution Jsfiddle.net এ অনুপ্রেরণার লিঙ্ক । আমি ধস এবং হ্যামবার্গার টগল সহ বুটস্ট্র্যাপের নাবার বার-ফিক্সড টপ ব্যবহার করছি। এখানে আমার সংস্করণটি jsfiddle: jsfiddle স্ক্রোলস্পি নাবার । Getbootsrap.com এ দেওয়া নির্দেশাবলী ব্যবহার করে আমি কেবলমাত্র প্রাথমিক কার্যকারিতা পাচ্ছিলাম। আমার জন্য, সমস্যাটি বেশিরভাগ গেটবুটস্ট্র্যাপ সাইট দ্বারা প্রস্তাবিত অস্পষ্ট দিকনির্দেশ এবং জেএসে ছিল। সর্বোত্তম অংশটি হ'ল এই অতিরিক্ত বিএসএস যুক্ত করা (যা উপরের থ্রেডগুলিতে উল্লিখিত কিছুতে অন্তর্ভুক্ত) আমার জন্য বেশ কয়েকটি স্ক্রোলস্পির সমস্যাগুলি সমাধান করেছে:

ন্যাভ "বিভাগ" (উদাঃ href = "# ফুবার") ক্লিক করা হলে (এই থ্রেডটিকে সম্বোধন করার সমস্যা রয়েছে) সঙ্কুচিত / টগল করা ন্যাভ মেনু লুকায়।
সক্রিয় "বিভাগ" সফলভাবে হাইলাইট করা হয়েছিল (যেমন। জেএস সফলভাবে তৈরি ক্লাস = "সক্রিয়")
ধস নেভায় পাওয়া বিরক্তিকর উল্লম্ব স্ক্রোল বার (কেবলমাত্র ছোট স্ক্রিনে) মুছে ফেলা হয়েছিল।

দ্রষ্টব্য: নীচে দেখানো জেএস কোডে (আমার পোস্টের দ্বিতীয় jsfiddle লিঙ্ক থেকে):

শীর্ষমেনু = $ ("# মাইক্রোকলস্পাই"),

... "myScrolspy" মানটি অবশ্যই এটির মতো আপনার এইচটিএমএলে id = "" এর সাথে মিলে যেতে হবে ...

<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 /> বা আমার ক্ষেত্রে <লিঙ্ক /> সাথে উল্লিখিত প্রতিক্রিয়ার সাথে যুক্ত করেও কাজ করে, আপনাকে ধন্যবাদ।

— জো এল।

হ্যাঁ এটি কাজ করে <a/>তবে এটি কাজ করে না <NavLink/>, এটি ধসে পড়ে তবে, <NavLink/>আর কোনও কাজ করছে না, কোনও ধারণা কেন?

— পিরামিড

0

এই কোডটি আমার পক্ষে কাজ করেছে:

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

— রডি পি। কার্বোনেল
সূত্র

0

আমার একই সমস্যা ছিল, আপনার এইচটিএমএল পৃষ্ঠায় বুটস্ট্র্যাপ.জেএস অন্তর্ভুক্ত রয়েছে তা নিশ্চিত করুন। আমার ক্ষেত্রে মেনু খোলে কিন্তু বন্ধ হয়নি। যত তাড়াতাড়ি আমি বুটস্ট্র্যাপ জেএস ফাইল অন্তর্ভুক্ত করেছি, সবকিছু সবেমাত্র কাজ করেছে।

— Elitmiar
সূত্র

0

ড্রপডাউন ধসের ক্লাসের জন্য জাভাস্ক্রিপ্টে একটি ফাংশন তৈরি করার চেষ্টা করুন সহজ।

উদাহরণ:

জেএস :

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

onClickআমার জন্য সহজ কাজ এই ফাংশন হুক ।

— yasir_mughal
সূত্র

0

আমার অনুরূপ সমস্যা ছিল তবে আমার এটি খোলা থাকবে না এটি খুব দ্রুত খুলবে / বন্ধ হবে, আমি দেখতে পেলাম যে আমার কাছে jstry-1.11.1.min.js বুটস্ট্র্যাপ.মিন.জেএস এর আগে লোড হচ্ছে। সুতরাং আমি সেই 2 টি ফাইলের ক্রমটিকে বিপরীত করেছি এবং আমার মেনু স্থির করেছি। নির্দোষভাবে এখন চলছে Run আশা করি এটা সাহায্য করবে

— Vasko
সূত্র

0

সমস্যাটি হতে পারে আপনি বুটস্ট্র্যাপ বা জ্যাকুরির পুরানো সংস্করণ ব্যবহার করছেন, বা আপনি আপনার মার্কআপে একাধিক সংস্করণ কল করছেন।

কেবল সর্বশেষতম সংস্করণগুলি রাখুন, আপনার কেবলমাত্র একটি রেফারেন্স প্রয়োজন। সমস্যা সমাধান করে।

— শুভক্ষণ
সূত্র

0

আপনি কেবল আপনার jQuery এবং বুটস্ট্র্যাপ.মিন.জেস এটিএফ লোড করছেন তা নিশ্চিত করতে চাইতে পারেন। আপনার নেভিগেশন পৃষ্ঠাটিতে রেন্ডার করার প্রথম জিনিস, তাই আপনার HTML এর নীচে যদি আপনার স্ক্রিপ্ট থাকে তবে আপনি কোনও জাভাস্ক্রিপ্ট কার্যকারিতা হারাচ্ছেন।

— ক্রিস জনসন
সূত্র

0

আমার কাছে একই সমস্যাটি কেবল মোবাইলে ছিল তবে একটি কৌণিক অ্যাপ্লিকেশনটির জন্য এবং এটি আমিই করেছি:

app.componal.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

— ব্রাভো স্টেফেন
সূত্র