Este artículo describe el efecto del menú desplegable de arranque de simulación JS. Compártelo para su referencia, como sigue:
Simular el menú desplegable Bootstrap
Para reducir un efecto en su trabajo: haga clic en la barra de navegación, aparecerá el siguiente menú, pero al hacer clic en otros lugares, el submenú se ocultará, el efecto es un poco similar al "menú desplegable" de Bootstrap
Dado que el estilo del submenú de bootstrap es diferente del diseño, debe escribir un efecto similar.
Cuando se hace clic en un control, se muestra el menú desplegable. Sin embargo, ¿cómo se puede ocultar automáticamente cuando se hace clic en un lugar en blanco?
Al principio, atado un evento de Onclick al cuerpo. Al hacer clic en un lugar en blanco, el evento del cuerpo de clic se activa debido al burbujeo del evento. Sin embargo, el problema es que al hacer clic en el control, el evento de clic del cuerpo también se activará, lo que resulta en que el menú desplegable se retraiga después de que se muestre, por lo que esta idea es incorrecta.
Dado que Bootstrap ha implementado esta función, verifique su código fuente y encontró una solución:
Ate el documento (oculte su submenú) y evita que el control burbujee al activar el método y evita que active la unión.
< <span> limpieza </span> <span> </span> <span> </span> </li> <li onClick = "jumpto (this)" target = "https://www.baidu.com"> <span> vegetales </span> </span> </span> </li> <li onClick = "jumpTO (este)") ") Target = "https://www.baidu.com"> <span> bocadillos </span> <span> </span> <span> </span> </li> </ul> </div> </div> <div> <div> <div> <span onClick = "showOrHideItem (este, evento) estilo = "superior: 100%; izquierda: 0px; z-index: 999; visual 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> <span> <span> </span> </ul> </div> </div> <div> <div onClick = "showsearch (this, evento)"> <span> </span> </div> <!-Show Search Buil dataSearch = "hide"> <div> <iv> <div style = "margin-right: 80px;"> <span style = "izquierda: 0px; top: 0px;"> </span> <input placeholder = "search" onclick = "stopent (this, event)" type = "text" value = "> </div> <div> <divir> <botin type =" button "style =" almocando " 12px; "> buscar </botón> </div> </div> </div> </div> </div> </div> </div> </div> <script> $ (function () {// bing el evento $ (documento) .on (" haga clic ", function () {// Busque el control cuyo control es UL y contiene el show de datos de atributo =" Show ". $ ("ul [data-show = 'show']"). SlideUp ("Slow"); $ ("div [data-search = 'show']"). css ("visualización", "ninguno"). CSS ("ancho", "32%"); var $ CurrentObj = $ (obj); // ocultar todas las listas desplegables $ ("UL [Data-show = 'show']"). Hide (); // Borrar todas las clases activas $ CurrentOBJ.Closest (". Row"). Find ("Div.Active"). RemoveClass ("Active"); // Agregue el estilo seleccionado $ CurrentOBJ.Closest (". // ul es el estado expandido if ($ ul.data ("show") == "show") {$ ul.slideUp ("lento"); $ ul.attr ("show de datos", "escondite"); } else {// ul es el estado expandido $ ul.slididown ("lento"); $ UL.ATTR ("Data-show", "show"); // Stop Event Bubble Event Event.stoppropagation (); }} // show box Box Función showsearch (obj, event) {var $ currentObj = $ (obj) .cloSest (". Float_left"). Find (". Search_cont"). CSS ("Display", "Bloque"); $ CurrentObj.animate ({ancho: "100%"}, 1000); $ CurrentObj.attr ("Data-Search", "Show"); // Stop Event Bubble Event Event.stoppropagation ();} function stopEvent (obj, event) {// stop Event Bubbles Event.stoppropagation ();} </script>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.