erweiterbar Suchformular in Bootstrap navbar obendrein erscheint sonst, wenn Breite nicht genug

Question

My JS Bin

Ich versuche, eine Suchtaste zum navbar-right Teil meiner Bootstrap nav hinzuzufügen, die, wenn sie eine Suche erweitern werden angeklickt Form (im Wesentlichen die gleiche Schaltfläche einschließlich einer input Tag).

ich scheinen einige Probleme konfrontiert werden:

• Die Schaltfläche nicht mit den anderen nav Artikel
• Wenn der Bildschirm der Größe verändert wird und die Schaltfläche geklickt wird (zum Auslösen der ‚Expansion‘) ausgerichtet ist, das Suchformular erscheint nicht mehr auf der gleichen Linie mit den anderen nav Elemente (die JS Bin Link mit, zB die Breite des Ausgangs sehen auf 769px)

ich versucht habe herum~~POS=TRUNC mit z-index so dass die Suche Formular scheint oben auf anderen Elementen zu sein es würde sich sonst überlappen, aber ohne Erfolg. Wie kann ich das erreichen? Und gibt es eine Möglichkeit, das Expanding/Collapsing nahtloser erscheinen zu lassen?

Answer 1

$(document).ready(function(){ 
    $("#search-button,#search-icon").click(function(){ 
     $(".hide1").toggle(); 
    }); 
}); 

geben hide1 Klasse zwei am weitesten rechts stehend li

 <li class="hide1"><a href="#" target="_blank">Link</a></li> 
     <li class="hide1"><a href="#">Another link</a></li> 

Verwendung dieser jquery Funktion können Sie das benötigte Ergebnis zu bekommen.