Bootstrap Dropdown zeigt doppelt? Weird-One

Ok, so habe ich in ein sonderbares Problem laufen, während etwas ziemlich einfach zu tun, und nach zwei Tagen Suche hoch und niedrig, frage ich mich hier, wenn jemand mich in der richtigen Richtung zeigen kann:Bootstrap Dropdown zeigt doppelt? Weird-One

I‘ m Aufbau eines einfachen Dropdown-Menüs mit Nav-Pills über Twitter Bootstrap. Ich befolge alle Anweisungen (nichts Kompliziertes) und verbinde mit bootstrap.min.js, bootstrap.min.css und jquery.min.js über cdn.

Allerdings zeigt die Ausgabe die Elemente Dropdown zweimal, einmal als ein hin- und Dropdownlist, die vertikal wirklich schön gestapelt und erscheint und versteckt sich, als man erwarten würde, aber dann auch überschichtet ist ein weiterer Satz von der exakt gleichen drowdownlist Elemente, diesmal horizontal verteilt, und nur dort, die ganze Zeit angezeigt, ohne Toggle-Funktionalität hinzugefügt.

BTW, ich habe versucht, dies als eine jsfiddle neu zu erstellen und drüben, die Dropdown-Liste nur nicht einmal angezeigt.

Das ist so komisch für mich, ich habe irgendwie die Richtungen auslaufen. Irgendwelche Ideen, irgendjemand? Hilfe wird sehr geschätzt!

Mein Code:

<head> 
    <title>Trial</title> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 
<nav id="navbar-bottom"> 
     <div class="container-fluid"> 
      <ul class="nav nav-pills pull-right"> 
       <li class="active"><a href="#">Active Link</a></li> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown Link</a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Option1</a></li> 
         <li><a href="#">Option2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
</nav>

und hier die Screenshots: diese auf umgeschaltet wird:

toggled on:

diese ein- und ausgeschaltet wird: toggled off

Quelle

2016-05-06 felicityiz

das ist wirklich komisch ..... können Sie eine Geige oder einen Codepen hinzufügen, um dieses Problem auszuprobieren? – SamGhatak

https://jsfiddle.net/filitz/yye4ypjv/ hier ist es, stackoverflow würde mich nicht lassen Sie diesen Link im ursprünglichen Beitrag hinzufügen, sorry – felicityiz

Bitte versuchen Sie diesen Code:

<li class="dropdown"><a href="javascript:void();" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown Link</a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Option1</a></li> 
     <li><a href="#">Option2</a></li> 
    </ul> 
    </li>

ich in Ihrem jsfiddle bearbeitet haben und es funktioniert für mich. Überprüfen Sie bitte das.

Quelle

2016-05-06 12:31:06

Sie haben Recht, es funktioniert in der JSfiddle, was bedeutet, dass das Dropdown auftaucht . Aber so ist es in meinem ursprünglichen Code. Was ich nicht lösen kann, ist, das geöffnete Dropdown-Menü loszuwerden, das das funktionierende toggle dropdown überlagert ... – felicityiz

Können Sie bitte ursprünglichen Code in jfiddle hinzufügen? –

Bootstrap Dropdown zeigt doppelt? Weird-One

Antwort

Verwandte Themen