ক্লিকে কলাপসিবল বুটস্ট্র্যাপ 4 নভবার কীভাবে আড়াল করবেন

Question 1

আমি বুটস্ট্র্যাপ 4 ব্যবহার করে এই সংযোগযোগ্য নাবারটি তৈরি করেছি যা দুর্দান্তভাবে কাজ করে, তবে ব্যবহারকারী কোনও লিঙ্কে ক্লিক করলে এটি বন্ধ করতে চাই। কোন উপায় এই কাজ করতে? ধন্যবাদ

এইচটিএমএল নাবার:

<nav class="navbar navbar-toggleable-md fixed-top">

<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
 </button>

            <div class="container">

                <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>

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

                        <ul class="navbar-nav mr-auto">

                            <li class="nav-item active">

                                <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>

                            </li>

                            <li class="nav-item">

                                <a class="nav-link" href="#about-us">About</a>

                            </li>

                            <li class="nav-item">

                                <a class="nav-link" href="#pricing">Pricing</a>

                            </li>

                        </ul>

                    </div>

            </div>

        </nav>

আইসন-বারের জন্য সিএসএস, যেহেতু বুটস্ট্র্যাপ 4 আইকন-বার শ্রেণি ব্যবহার করে না।

.navbar-toggler .icon-bar {
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;
}

Question 2

আপনি collapseলিঙ্কগুলিতে এই উপাদানটি যুক্ত করতে পারেন ..

<ul class="navbar-nav mr-auto">
     <li class="nav-item active">
         <a class="nav-link" href="#home" data-toggle="collapse" data-target=".navbar-collapse.show">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.show">Pricing</a>
     </li>
 </ul>

'ডেটা-টগল' পদ্ধতি ব্যবহার করে ডেমো

অথবা , (সম্ভবত আরও ভাল উপায়) এর মতো jQuery ব্যবহার করুন ..

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

JQuery পদ্ধতি ব্যবহার করে ডেমো

2019 আপডেট করুন - বুটস্ট্র্যাপ 4

নাবারটি পরিবর্তিত হয়েছে, তবে "ক্লিকের পরে বন্ধ করুন" পদ্ধতিটি এখনও একই রকম:

https://codeply.com/go/nFDHoEqqJQ (jQuery পদ্ধতি)
https://codeply.com/go/PqIBtz3HPL ( data-toggleপদ্ধতি, বুটস্ট্র্যাপ সঙ্কুচিত উপাদান দেখুন )

Question 3

আমি অ্যানগুলার ব্যবহার করছি এবং যেহেতু এটি আমাকে সমস্যা দিয়েছে রাউটারলিঙ্কটি কেবল লি-ট্যাগে ডেটা-টগল এবং টার্গেট যুক্ত করুন .... বা "জিম সিস্টেম" এর মতো জ্যাকুরি ব্যবহার করুন

<div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
          <a class="nav-link" routerLink="/inicio" routerLinkActive="active" >Inicio</a>
        </li>
      </ul>
</div>

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

Question 4

আপনি $.collapse('hide');লিঙ্কগুলিতে ইভেন্ট হ্যান্ডলারের সাথে কল করতে পারেন ।

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

.navbar-toggler .icon-bar {
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md fixed-top">
  <button id="nav-btn" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
 </button>
  <div class="container">
    <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
    <div class="collapse navbar-collapse" id="navbarDiv">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about-us">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#pricing">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

Question 5

উপরের সমাধানগুলি চেষ্টা করে, আমি ড্রপডাউন টগলসের জন্য একটি সমাধান অনুপস্থিত ছিল, সুতরাং আপনি এখানে যান! সাবমেনু আইটেমগুলিও খোলে।

আপনার টগল ক্লাসটি আলাদা হলে হতে পারে আপনাকে এটি কিছুটা টুইট করতে হবে।

$('.navbar-nav li a').on('click', function(){
    if(!$( this ).hasClass('dropdown-toggle')){
        $('.navbar-collapse').collapse('hide');
    }
});

Question 6

অ্যাঙ্কারে ক্লিক করার পরে তালিকা আইটেমটিতে এই লাইনটি প্রয়োগ করুন মেনু বন্ধ করার সমাধান এটি

     data-target="#sidenav-collapse-main" data-toggle="collapse"

আমার জন্য কাজ করে এমন আসল উদাহরণ নীচে

      <li class="nav-item" data-target="#sidenav-collapse-main" data- 
      toggle="collapse" >
      <a class="nav-link" routerLinkActive="active" routerLink="/admin/users">
        <i class="ni ni-single-02  text-orange"></i> Users
      </a>
      </li>

Question 7

আমি বুস্ট্র্যাপ 4 এর সাথে কৌনিক 5 ব্যবহার করছি এটি আমার পক্ষে এইভাবে কাজ করে।

 $(document).on('click', '.navbar-nav>li>a, .navbar-brand, .dropdown-menu>a', function (e) {
      if ( $(e.target).is('a') && $(e.target).attr('class') != 'nav-link dropdown-toggle' ) {
        $('.navbar-collapse').collapse('hide');
      }
    });
   }

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" [routerLink]="['/home']">FbShareTool</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active" *ngIf="_myAuthService.isAuthenticated()">
        <a class="nav-link" [routerLink]="['/dashboard']">Dashboard <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown" *ngIf="_myAuthService.isAuthenticated()">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Manage
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" [routerLink]="['/fbgroup']">Facebook Group</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Fetch Data</a>
          </div>
      </li>
    </ul>

    <ul class="navbar-nav navbar-right navbar-right-link">
        <li class="nav-item" *ngIf="!_myAuthService.isAuthenticated()" >
            <a class="nav-link" (click)="logIn()">Login</a>
        </li>
        <li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
           <a class="nav-link">{{ _myAuthService.userDetails.displayName }}</a>
        </li>
        <li class="nav-item" *ngIf="_myAuthService.isAuthenticated() && _myAuthService.userDetails.photoURL">
            <a>
              <img [src]="_myAuthService.userDetails.photoURL" alt="profile-photo" class="img-fluid rounded" width="40px;">
            </a>
        </li>
        <li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
            <a class="nav-link" (click)="logOut()">Logout</a>
        </li>
    </ul>

  </div>
</nav>

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

Question 8

কোনও কোডিং ছাড়াই কেবল কৌনিক 2/4 টেমপ্লেট ব্যবহার করে এটি করার সহজতম উপায়:

<nav class="navbar navbar-default" aria-expanded="false">
  <div class="container-wrapper">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="navbar-collapse collapse no-transition" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
      <ul class="nav navbar-nav" (click)="isCollapsed = !isCollapsed">
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="/">Home</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/about">About</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/portfolio">Portfolio</a></li>
        <li [routerLinkActive]="['active']"><a routerLink="/contacts">Contacts</a></li>
      </ul>
    </div>

  </div>
</nav>

Question 9

এই কোডটি ফেইড আউটকে প্রভাবিত করে মেনুতে একটি লিঙ্কে ক্লিক করে নাবারটি বন্ধ করতে বার্গার বোতামে ক্লিক করার অনুকরণ করে। কৌণিক জন্য টাইপস্ক্রিপ্ট সঙ্গে সমাধান 7. রাউটার লিঙ্ক সমস্যা এড়ান।

ToggleNavBar () {
    let element: HTMLElement = document.getElementsByClassName( 'navbar-toggler' )[ 0 ] as HTMLElement;
    if ( element.getAttribute( 'aria-expanded' ) == 'true' ) {
        element.click();
    }
}

<li class="nav-item" [routerLinkActive]="['active']">
    <a class="nav-link" [routerLink]="['link1']" title="link1" (click)="ToggleNavBar()">link1</a>
</li>

Question 10

আপনি ক্লিক করুন এবং বন্ধ করতে একটি সহজ বাঁধাই ব্যবহার করতে পারেন, এই জাতীয়: (click)="drawer.close()

<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">