El capítulo de menú desplegable Bootstrap explica el menú desplegable, pero no implica la parte de interacción. Este capítulo explicará la interacción del menú desplegable en detalle. Usando el complemento desplegable, puede agregar menús desplegables a cualquier componente (como barras de navegación, pestañas, menús de navegación cápsula, botones, etc.).
Si desea hacer referencia a la funcionalidad del complemento por separado, entonces debe hacer referencia a Downdown.js. O, como se menciona en el capítulo de descripción general del complemento Bootstrap, puede consultar bootstrap.js o versiones comprimidas de bootstrap.min.js.
1. Uso
Puede alternar el contenido oculto del complemento del menú desplegable (desplegable):
1. Use el atributo de datos: agregue datos de datos = "desplegable" al enlace o botón para cambiar el menú desplegable, como se muestra a continuación:
<Div> <a data-toggle = "desplegable" href = "#"> disparador desplegable </a> <ul role = "menú" aria-labelledby = "dlabel"> ... </ul> </div>
Si necesita mantener el enlace intacto (útil cuando el navegador no habilita JavaScript), use la propiedad Data-Target en lugar de href = "#":
<div> <a id = "dlabel" role = "botón" data-toggle = "desplegable" data-target = "#" href = "/page.html"> menú desplegable (desplegable) <span> </span> </a> <ul role = "menú" Aria-LabelledBy = "dlabel"> ... </ul> </iv>
2. A través de JavaScript: para cambiar a través de JavaScript, utilice el siguiente método:
$ ('. Dropdown-toggle'). Dropdown ()
2. Ejemplo simple de menú desplegable
En uso general, el código es el mismo que los métodos de componentes:
// Uso declarativo <viv> <button data data-toggle = "desplegable"> menú desplegable <span> </span> </button> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> producto </a> </li> <li> <a href = "#" href = "#"> sobre </a> </li> </ul> </div>
El núcleo clave del uso declarativo:
1. Use paquetes para contenedores periféricos;
2. Bindeo de datos de datos = "desplegable" para el evento de botón de clic interno;
3. Use elementos de menú.
// Si el botón está fuera del contenedor, se puede unir a través del Target de datos. <botón id = "btn" data-toggle = "desplegable" data-target = "#desplegable"> En las llamadas de JavaScript, no hay propiedades y el método no es fácil de usar. Los siguientes son cuatro eventos básicos. // método de menú desplegable, pero aún necesita datos-*$ ('#btn'). Dropdown (); $ ('#btn'). Dropdown ('Toggle');El menú desplegable admite 4 tipos de eventos, correspondientes a antes de la ventana emergente, después de la ventana emergente, antes del cierre y después del cierre.
// Eventos, otros $ ('#Dropdown'). On ('show.bs.dropdown', function () {alert ('freaks inmediatamente cuando se llama el método del programa!');});3. Uso de menús desplegables en la página de pestañas
<!DOCTYPE html><html><head> <title>Bootstrap instance - Tag page with drop-down menu</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <p> Página de etiqueta con menú desplegable </p> <ul> <li> <a href = "#"> home </a> </ali> <li> <a href = "#"> svn </a> </li> <li> <i <a href = "#"#" <li> <a href = "#"> vb.net </a> </li> <li> <a data-toggle = "desplegable" href = "#"> java <span> </span> </a> <ul> <li> <a href = "#"> swing </a> </li> <li> <a href = "#"> jmeter </a> href = "#"> EJB </a> </li> <li> <a href = "#"> enlace firmado </a> </li> </li> </li> <li> <a href = "#"> php </a> </li> </ul> </body> </html>
Imagen de reproducción:
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.