Dieser Artikel beschreibt den Effekt des Dropdown-Menüs von JS-Simulation Bootstrap. Teilen Sie es für Ihre Referenz wie folgt weiter:
Simulieren Sie das Bootstrap-Dropdown-Menü
Um einen Effekt in Ihren Arbeiten zu senken: Klicken Sie auf die Navigationsleiste, das folgende Menü wird angezeigt. Wenn Sie jedoch auf andere Stellen klicken, ist das Untermenü versteckt, der Effekt ähnlich dem "Dropdown-Menü" von Bootstrap ähnlich
Da sich der Stil des Bootstrap -Untermenus vom Design unterscheidet, müssen Sie selbst einen ähnlichen Effekt schreiben.
Wenn ein Steuerelement geklickt wird, wird das Dropdown-Menü angezeigt. Wie kann es jedoch automatisch versteckt werden, wenn ein leerer Ort geklickt wird?
Am Anfang habe ich ein Onclick -Event an den Körper gebunden. Wenn Sie auf einen leeren Ort klicken, wird das Klick -Körperereignis aufgrund des Sprudelns des Ereignisses ausgelöst. Das Problem ist jedoch, dass beim Klicken auf die Steuerung auch das Klick-Ereignis ausgelöst wird, was dazu führt, dass das Dropdown-Menü nach seiner Anzeige zurückgezogen wird, sodass diese Idee falsch ist.
Da Bootstrap diese Funktion implementiert hat, überprüfen Sie den Quellcode und fanden eine Lösung:
Binden Sie das Dokument (verbergen Sie sein Untermenü) und verhindert, dass die Steuerung beim Auslösen der Methode sprudelt und verhindert, dass die Bindung ausgelöst wird.
<!-Filter Navigationsleiste-> <div style = "z-Index: 999"> <div> <span onclick = "showorhideItem (this, Ereignis)"> Kategorie <span> </span> </span> <ul data show = "hide" style = "z-Index: 999; target = "https://www.baidu.com"> <span> Housekeeping </span> <span> </span> <span> </span> </li> <li onclick = "jumpto (this)" target = "https onclick = "Jumpto (this)" target = "https://www.baidu.com"> <span> Snacks </span> <span> </span> <span> </span> </li> </ul> </div> </div> <div> <divclick = "span> </span> showorhideem (this, this)"). data-show="hide" style="top:100%;left: 0px;z-index: 999;display: none"> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>Housekeeping1</span> <span></span> <span></span> </li> <li onclick="jumpTo(this)" target = "https://www.baidu.com"> <span> pegetable1 </span> <span> </span> <span> </span> <pan> </span> </li> <li onclick = "Jumpto (this)" target = "https://www.baidu.com" </ul> </div> </div> <div> <div onclick = "showSearch (this, Ereignis)"> <span> </span> </div> <!-Suchbox anzeigen-> <div> <div> <div> <div> <divis = "top: 58%; rechts: 0px; Z-Index: 999; Anzeige: None;" data-search="hide"> <div> <div> <div style="margin-right: 80px;"> <span style="left: 0px;top:0px;"></span> <input placeholder="Search" onclick="stopEvent(this,event)" type="text" value=""> </div> <div> <button type="button" style="padding: 4px 12px; "> such </button> </div> </div> </div> </div> </div> </div> </div> </div> <skript> $ (function () {// Binden Sie das Ereignis $ $ (document) .on (" klicken ", function () {// Das Steuerelement, dessen Kontrolle es ist, und es enthält das Attribut-Data-Show =". $ ("ul [data-show = 'show']"). SlideUp ("Slow"); $ ("div [data-search = 'show']"). CSS ("Anzeige", "keine"). var $ currentObj = $ (OBJ); // Alle Dropdown-Listen ausblenden $ ("ul [data-show = 'show']"). Hide (); // Alle aktiven Klassen $ currentObj.closest (". Row"). Find ("Div.Active"). Removeclass ("Active"); // Fügen Sie den ausgewählten Stil $ currentObj.closest (". Float_left") hinzu. // ul ist der erweiterte Zustand, wenn ($ ul.data ("show") == "show") {$ ul.slideup ("langsam"); $ ul.attr ("data show", "hide"); } else {// ul ist der erweiterte Zustand $ ul.slidedown ("langsam"); $ ul.attr ("data show", "show"); // Stop Event Bubble Event Event.StopPropagation (); }} // Suchfeldfunktion anzeigen zeigt an. $ currentObj.Animate ({width: "100%"}, 1000); $ currentObj.attr ("Datensearch", "Show"); // Stop Event Bubble Event Ereignis.StopPropagation ();} Funktion stopvent (OBJ, Ereignis) {// Stop -Ereignisblasen Ereignis.Stoppropagation ();} </script>Weitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.