Artikel ini menjelaskan efek menu drop-down Simulasi Simulasi JS. Bagikan untuk referensi Anda, sebagai berikut:
Simulasi menu drop-down bootstrap
Untuk memotong efek dalam pekerjaan Anda: Klik pada bilah navigasi, menu berikut akan muncul, tetapi saat mengklik di tempat lain, submenu akan disembunyikan, efeknya sedikit mirip dengan "menu tarik-turun" dari Bootstrap
Karena gaya submenu bootstrap berbeda dari desain, Anda perlu menulis efek yang sama sendiri.
Saat kontrol diklik, menu tarik-turun ditampilkan. Namun, bagaimana bisa disembunyikan secara otomatis ketika tempat kosong diklik?
Pada awalnya, saya mengikat acara OnClick ke tubuh. Saat mengklik tempat kosong, acara klik Body dipicu karena menggelegak acara. Namun, masalahnya adalah bahwa ketika mengklik kontrol, acara klik tubuh juga akan dipicu, menghasilkan menu tarik-turun yang ditarik setelah ditampilkan, jadi ide ini salah.
Karena Bootstrap telah menerapkan fungsi ini, periksa kode sumbernya dan menemukan solusi:
Bind dokumen (sembunyikan submenu), dan mencegah kontrol dari menggelegak saat memicu metode dan mencegahnya memicu ikatan.
<!-Bar Navigasi Filter-> <div style = "z-index: 999"> <ver> <span onclick = "showorhideitem (ini, acara)"> Kategori <span> </span> </span> <ul data = "hide" style = "z-index: 999;"> <Li onClick = "JUMPTO (this)" HUBPO "" HUBPO "" HOMPTO "; <span> Housekeeping </span> <span> </span> <span> </span> </li> <li onClick = "jumpto (this)" target = "https://www.baidu.com"> <span> </span> <span> </span> <span> </span> </Li On/Lion = LIPL "JUPLE </span> </span> </span> </Li </Li ') target="https://www.baidu.com"> <span>Snacks</span> <span></span> <span></span> </li> </ul> </div></div><div> <div> <span onclick="showOrHideItem(this,event)"> Category<span></span> </span> <ul data-show="hide" style = "atas: 100%; kiri: 0px; z-index: 999; display: none"> <li onclick = "jumpto (this)" target = "https://www.baidu.com"> <span> housekeeping1 </span> <span> </span> <span> </span> </li on/lion = "JUPT) </span> <pan> </span> </li on/li on/li" target="https://www.baidu.com"> <span>Vegetable1</span> <span></span> <span></span> <span></span> </li> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>Snack1</span> <span></span> <span></span> </ul> </div> </div> <div> <div onClick = "Showearch (this, event)"> <span> </span> </div> <!-Tampilkan kotak pencarian-> <v> <div style = "Top: 58%; kanan: 0px; z-indeks: 999; Tampilan: Tidak Ada;" data-pencarian = "hide"> <verv> <viv> <div style = "margin-right: 80px;"> <span style = "kiri: 0px; atas: 0px;"> </span> <input placeholder = "cari" ontClick = "stopEvent (ini, peristiwa)" type = "teks" value = ""> </Div> Divent (this, event) "type =" text "value" value = ""> </Div> Divent: "This, event)" TYPE = "TEXT" Value "Value =" "> </Div> 12px; "> Cari </button> </div> </div> </div> </div> </div> </div> </div> </div> <script> $ (function () {// ikat peristiwa $ (dokumen) .on (" klik ", fungsi () {// Cari kontrol yang kontrolnya adalah UL dan mengandung atribut data-show =" $ (UL [data-show = 'show'] "). Slideup (" Slow "); $ ("Div [data-pencarian = 'show']"). CSS ("display", "none"). css ("lebar", "32%"); var $ currentObj = $ (obj); // Sembunyikan semua daftar drop-down $ ("UL [data-show = 'show']"). Sembunyikan (); // Bersihkan semua kelas aktif $ CurrentObj.closest (". // Tambahkan gaya yang dipilih $ currentObj.closest (". Float_left"). AddClass ("Active") var $ ul = $ currentObj.closest ("Div"). Find ("Ul"); // UL adalah keadaan diperluas jika ($ ul.data ("show") == "show") {$ ul.slideup ("lambat"); $ ul.attr ("data-show", "hide"); } else {// ul adalah status yang diperluas $ ul.slidedown ("lambat"); $ ul.attr ("data-show", "show"); // hentikan acara acara gelembung acara.stoppropagation (); }} // Tampilkan fungsi kotak pencarian menunjukkan penelitian (obj, event) {var $ currentObj = $ (obj) .closest (". Float_left"). Find (". Search_cont"). Css ("display", "block"); $ currentObj.animate ({width: "100%"}, 1000); $ CurrentObj.attr ("Data-Search", "Show"); // hentikan acara acara gelembung event.stoppropagation ();} function stopEvent (obj, event) {// stop event bubbles event.stoppropagation ();} </script>Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.