2017-10-02 1 views
0
klicken

Das Menü wird für eine kurze Sekunde heruntergeklappt und dann wieder hochgefahren. Kann mir bitte jemand helfen, es zu reparieren? Wenn mir jemand einen Code vorschlagen könnte, damit er funktioniert, wäre das noch besser.Bootstrap Reduziertes Menü wird ausgeblendet, wenn Sie auf

Dies ist der Code:

<nav class="navbar transparent navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a> 

     <div id="main_nav" class="collapse nav-collapse"> 
     <ul class="nav pull-right "> 
      <li><a href="index.html" class="active">HOME</a></li> 
      <li><a href="aboutus-resolution-accounting-west-chester.html">ABOUT US</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> SERVICES <b class="caret"></b> </a> 
      <ul class="dropdown-menu"> 
       <li><a href="index.html">Bookkeeping</a></li> 
       <li><a href="accounting-services-west-chester-resolution-accounting.html">Accounting</a></li> 
       <li><a href="cfo-oversight-services-west-chester-resolution-accounting.html">CFO Oversight</a></li> 
       <li><a href="equity-raises-west-chester-resolution-accounting.html">Equity Raises</a></li> 
      </ul> 
      </li> 
      <li><a href="testimonials-resolution-accounting.html">TESTIMONIALS</a></li> 
      <li><a href="contact.html">CONTACT US</a></li> 
     </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</nav> 

+0

Überprüfen Sie das Konsolenprotokoll, es muss ein Javascript-Fehler sein. Stellen Sie sicher, dass Sie jQuery laden, bevor bootstrap.js –

+0

jQuery zuerst geladen wird. –

+0

$ ("# main_nav"). On ('klick', funktion() { $ ("# main_nav"). Css ('height', '208px'); }); –

Antwort

0

Sie sind mit Bootstrap Version 3.3.6 Javascript Bootstrap-Version 2.3.2 mit CSS. Sie sind nicht miteinander kompatibel. Sie müssen dieselbe Version von Bootstrap für CSS und Javascript verwenden, um das richtige Verhalten zu erhalten.

(Es wäre hilfreich gewesen, wenn Sie die URL the site you need help with enthalten war.)

0

Hier können Sie mit einer Lösung https://jsfiddle.net/wqy986bt/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar transparent navbar-inverse navbar-fixed-top"> 
 
    <div class="navbar-inner"> 
 
    <div class="container"> 
 
     <a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </a> 
 
     <a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a> 
 

 
     <div id="main_nav" class="collapse nav-collapse"> 
 
     <ul class="nav pull-right "> 
 
      <li><a href="index.html" class="active">HOME</a></li> 
 
      <li><a href="aboutus-resolution-accounting-west-chester.html">ABOUT US</a></li> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> SERVICES <b class="caret"></b> </a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="index.html">Bookkeeping</a></li> 
 
       <li><a href="accounting-services-west-chester-resolution-accounting.html">Accounting</a></li> 
 
       <li><a href="cfo-oversight-services-west-chester-resolution-accounting.html">CFO Oversight</a></li> 
 
       <li><a href="equity-raises-west-chester-resolution-accounting.html">Equity Raises</a></li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="testimonials-resolution-accounting.html">TESTIMONIALS</a></li> 
 
      <li><a href="contact.html">CONTACT US</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

Es gibt nur wenige Dinge gehen:

  • Sie am Ende des Codes
  • eine zusätzliche Schließ div haben Überprüfen Sie die Bestellung der Bibliotheksdatei
    • Bootstrap CSS
    • jQuery
    • Bootstrap JS

habe ich verwendet, bootstrap v3.3.7 und jQuery v2.1.1 (in snippet) und jQuery v2.2.4 (in jsfiddle)

Hoffe, das wird dir helfen.

Verwandte Themen