Latest web development tutorials

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:

Las fichas con menú desplegable

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:

Fijado en la parte superior