menú desplegable de arranque (desplegable) Reproductor
Bootstrap menú desplegable En este capítulo se explica el menú desplegable, pero no está relacionado con la parte de interacción, en este capítulo se explicará en detalle la interacción del menú desplegable. Utilice el menú desplegable (desplegable) plug-in, puede agregar un menú desplegable para cualquiera de los componentes (tales como barra de navegación, pestañas, cápsulas, menús de navegación, botones, etc.).
Si se desea hacer referencia a las características individuales de plug-in, es necesario hacer referencia adropdown.js.O, como Bootstrap general Plugin capítulo mencionado, se puede hacer referencia abootstrap.jso versión comprimida debootstrap.min.js.
uso
Puede alternar ocultar menú desplegable (desplegable) plug-in:
- A través de atributos de datos: un enlace o botón para añadir datos de palanca = "desplegable"menú desplegable para cambiar, de la siguiente manera:
<Div class = "desplegable">
<a data-toggle="dropdown" menú desplegable href="#"> (desplegable) de disparo </a>
<Ul class = "menú desplegable," role = "menú" aria-labelledby = "dlabel">
...
</ Ul>
</ Div>
Si es necesario mantener intacto el enlace (útil cuando el navegador no está JavaScript habilitado), por favor utilice atributode destino de los datos en lugar de href = "#":
<Div class = "desplegable">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Menú desplegable (desplegable) <span class = "cursor"> </ span>
</a>
<Ul class = "menú desplegable," role = "menú" aria-labelledby = "dlabel">
...
</ Ul>
</ Div>
- Por JavaScript: JavaScript llamando el menú desplegable para cambiar, por favor, utilice el método siguiente:
$ ( '. Desplegable-alternar'). Desplegable ()
Ejemplos
En la barra de navegación
El siguiente ejemplo muestra el uso del menú desplegable de la barra de navegación:
Ejemplos
<Nav class = "barra de navegación barra de navegación-default" role = "navegación">
<Div class = "contenedor de fluido">
<Div class = "navbar-header">
<A class = "navbar-marca" href = "#"> tutorial </ a>
</ Div>
<Div>
<ul class = "nav-barra de navegación nav" >
<Li class = "activa"> <a href = "#"> IOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "desplegable">
<A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b>
</ A>
<ul class = "menú desplegable">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "divisor"> </ li>
<Li> <a href = "#"> aislado enlace </ a> </ li>
<Li class = "divisor"> </ li>
<Li> <a href = "#"> otro eslabón aislado </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Trate » Los resultados son los siguientes:
En una pestaña dentro
El siguiente ejemplo muestra el uso de la pestaña en el menú desplegable:
Ejemplos
<P> con un menú desplegable la página </ p>
<ul class = "nav nav-pestañas" >
<Li class = "activa">
<A href = "#"> Inicio < / a> </ li>
<Li>
<A href = "#"> SVN < / a> </ li>
<Li>
<A href = "#"> IOS < / a> </ li>
<Li>
<A href = "#"> VB.Net < / a> </ li>
<Li class = "desplegable">
<A class = "desplegable-toggle" datos de palanca = "desplegable" href = "#"> Java < lapso class = "cursor"> </ span> </ a>
<ul class = "menú desplegable">
<Li>
<A href = "#"> Oscilación < / a> </ li>
<Li>
<A href = "#"> jMeter < / a> </ li>
<Li>
<A href = "#"> EJB < / a> </ li>
<Li class = "divisor"> </ li>
<Li>
<A href = "#"> aislado enlace </ a> </ li>
</ Ul>
</ Li>
<Li>
<A href = "#"> PHP < / a> </ li>
</ Ul>
Trate » Los resultados son los siguientes:
opciones
No hay opciones.
camino
Menú desplegable para cambiar hay una forma sencilla de mostrar u ocultar el menú desplegable.
$ (). Desplegable ( 'alternar')
Ejemplos
El siguiente ejemplo muestra el menú desplegable (desplegable) Método de plug-in:
Ejemplos
<Nav class = "barra de navegación barra de navegación-default" role = "navegación">
<Div class = "contenedor de fluido">
<Div class = "navbar-header">
<A class = "navbar-marca" href = "#"> W3Cschool < / a>
</ Div>
<Div id = "myExample">
<ul class = "nav-barra de navegación nav" >
<Li class = "activa">
<A href = "#"> IOS < / a>
</ Li>
<Li>
<A href = "#"> SVN < / a>
</ Li>
<Li class = "desplegable">
<A href = "#" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b>
</ A>
<ul class = "menú desplegable">
<Li>
<A id = "acción-1" href = "#"> jmeter < / a>
</ Li>
<Li>
<A href = "#"> EJB < / a>
</ Li>
<Li>
<A href = "#"> Jasper Report </ a>
</ Li>
<Li class = "divisor"> </ li>
<Li>
<A href = "#"> aislado enlace </ a>
</ Li>
<Li class = "divisor"> </ li>
<Li>
<A href = "#"> otro eslabón aislado </ a>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
</ Div>
<Script> $ (function () {$ ( "desplegable-basculante.") Desplegable ( 'alternar') ;.}); </ script>
Trate » Los resultados son los siguientes: