क्लिक करने पर बंधे बूटस्ट्रैप 4 नौबार को कैसे छिपाएं

Question

मैंने बूटस्ट्रैप 4 का उपयोग करते हुए यह संक्षिप्त करने योग्य नावबार बनाया है जो अच्छी तरह से काम करता है, लेकिन मैं चाहूंगा कि जब उपयोगकर्ता किसी लिंक पर क्लिक करे। इसे करने का कोई तरीका? धन्यवाद

html नावबार:

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

.icon- बार के लिए css, चूंकि बूटस्ट्रैप 4 आइकन-बार क्लास का उपयोग नहीं करता है।

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

Answer 1

आप 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विधि, बूटस्ट्रैप संक्षिप्त घटक देखें )

Comments

नमस्ते, उत्तर के लिए धन्यवाद, लेकिन जब मैं ऐसा करता हूं तो यह नावबार को ध्वस्त नहीं करता है, बल्कि div तत्व इसे स्क्रॉलपी से जोड़ा जाता है। कोई सुझाव? धन्यवाद

— रूडी थिएल

शानदार .. और याद रखें आप <span class="navbar-toggler-icon"></span>बीएस 4. में आइकन बार के लिए उपयोग कर सकते हैं

— ज़िम

आप navbar-inverseसभी पाठ रंगों को सफ़ेद (या पारदर्शी सफ़ेद) में बदलने के लिए नवबर में उपयोग कर सकते हैं

— Zim

@Zim - आप स्थापित करने के लिए data-toggleऔर data-targetमाता पिता के तत्व (करने के लिए li), बजाय, अन्यथा काम नहीं करेगा Scrollspy। शायद आपको अपना उत्तर संपादित करना चाहिए। :)

— जे। सदि

@ J.Sadi के सुझाव ने मेरे लिए यह काम किया। अन्यथा लिंक क्लिक ने कुछ नहीं किया।

— कुल

Answer 2

मैं ANGULAR का उपयोग कर रहा हूं और चूंकि इसने मुझे समस्याएं दीं हैं कि रूटर लाइक करें और केवल टैग में डेटा-टॉगल और लक्ष्य जोड़ें .... या "ZimSystem" जैसे jquery का उपयोग करें

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

Comments

धन्यवाद, आपने मेरे लिए दिन बचा लिया है!। मैं बूटस्ट्रैप 4.1.3 के साथ कोणीय 6 का उपयोग कर रहा हूं। data-toggle="collapse" data-target=".navbar-collapse.show"ली को ड्रॉपडाउन ली सहित लागू किया गया।

— सीखना ...

यह उत्तर जस्ट क्लीन एंड सुपर्ब है!

— राष्ट्र चिरा

Answer 3

आप $.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>

Answer 4

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

यदि आपके टॉगल वर्ग अलग है, तो शायद आपको इसे थोड़ा मोड़ना होगा।

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

Comments

यह छोटा है, और संभवतः तेज़ है:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }

— जेम्स विल्किंस

Answer 5

यह मेनू को बंद करने का समाधान है जब लंगर पर क्लिक करें तो सूची आइटम में इस पंक्ति को लागू करें

     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>

Answer 6

मैं Boostrap 4 के साथ Angular 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>

Answer 7

बिना कोडिंग वाले केवल कोणीय 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>

Answer 8

यह कोड फीगर आउट इफ़ेक्ट को ध्यान में रखते हुए मेनू में एक लिंक पर क्लिक करके नेवबार को बंद करने के लिए burguer बटन पर एक क्लिक का अनुकरण करता है। कोणीय के लिए टाइपस्क्रिप्ट के साथ समाधान 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>

Comments

JQuery के साथ प्रस्तावित समाधान lazzy लोड करने के साथ कोणीय 7 में सही ढंग से काम नहीं करते हैं।

— edu

Answer 9

यू क्लिक और बंद करने के लिए बस इस तरह से उपयोग कर सकते हैं: (click)="drawer.close()

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