Latest web development tutorials

menu suspenso Bootstrap (suspensa) Widget

Bootstrap menu dropdown Este capítulo explica o menu drop-down, mas não relacionado com a parte de interação, este capítulo irá explicar em detalhe a interação do menu drop-down. Utilize o menu suspenso (drop-down) plug-in, você pode adicionar um menu drop-down para qualquer um dos componentes (tais como barra de navegação, guias, cápsulas, menus de navegação, botões, etc.).

Se você quiser para se referir às características individuais de plug-in, você precisa fazer referênciadropdown.js.Ou, como Bootstrap plug-in Overview capítulo mencionado, você pode se referir abootstrap.jsou versão comprimida debootstrap.min.js.

uso

Você pode alternar FECHAR suspensa (drop-down) plug-in:

  • Através de atributos de dados: um link ou botão para adicionar dados-toggle = "dropdown"menu drop-down para mudar, como segue: 
    <Div class = "dropdown">
  <a data-toggle="dropdown" menu drop-down href="#"> (suspensa) gatilho </a>
  <Class Ul = "dropdown-menu" role = "menu" aria-labelledby = "dlabel">
    ...
  </ Ul>
</ Div>

    Se você precisa manter a ligação intacta (útil quando o navegador não está habilitado JavaScript), utilize oatributo-alvo dados em vez de href = "#":

    <Div class = "dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    menu (suspensa) suspenso <span class = "acento circunflexo"> </ span>
  </a>


  <Class Ul = "dropdown-menu" role = "menu" aria-labelledby = "dlabel">
    ...
  </ Ul>
</ Div>
  • Por JavaScript: JavaScript chamando o menu drop-down para mudar, por favor use o seguinte método:
    $ ( '. Dropdown-toggle "). Suspensa ()

Exemplos

Na barra de navegação

O exemplo a seguir demonstra o uso do menu drop-down barra de navegação:

Exemplos

<Nav class = "navbar navbar-default" role = "navegação"> <Div class = "recipiente de líquido"> <Div class = "navbar-header"> <A class = "navbar-brand" href = "#"> tutorial </ a> </ Div> <Div> <Ul class = "nav navbar-nav" > <Li class = "ativo"> <a href = "#"> iOS < / a> </ li> <Li> <a href = "#"> SVN < / a> </ li> <Li class = "dropdown"> <A href = "#" class = "dropdown-toggle" Dados-toggle = "dropdown"> Java <b class = "acento circunflexo"> </ b> </ A> <Ul class = "dropdown-menu"> <Li> <a href = "#"> jmeter < / a> </ li> <Li> <a href = "#"> EJB < / a> </ li> <Li> <a href = "#"> Relatório Jasper </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> isolado ligação </ a> </ li> <Li class = "divisor"> </ li> <Li> <a href = "#"> outro link isolado </ a> </ li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav>

tente »

Os resultados são os seguintes:

Em uma guia dentro

O exemplo a seguir demonstra o uso da guia no menu drop-down:

Exemplos

<P> tag com uma página menu suspenso </ p> <Ul class = "nav nav-tabs" > <Li class = "ativo"> <A href = "#"> Home < / a> </ li> <Li> <A href = "#"> SVN < / a> </ li> <Li> <A href = "#"> iOS < / a> </ li> <Li> <A href = "#"> VB.Net < / a> </ li> <Li class = "dropdown"> <A class = "dropdown-toggle" Dados-toggle = "dropdown" href = "#"> Java < extensão class = "acento circunflexo"> </ span> </ a> <Ul class = "dropdown-menu"> <Li> <A href = "#"> Balanço < / a> </ li> <Li> <A href = "#"> jMeter < / a> </ li> <Li> <A href = "#"> EJB < / a> </ li> <Li class = "divisor"> </ li> <Li> <A href = "#"> isolado ligação </ a> </ li> </ Ul> </ Li> <Li> <A href = "#"> PHP < / a> </ li> </ Ul>

tente »

Os resultados são os seguintes:

Guias com menu dropdown

opções

Não há opções.

caminho

Drop-down menu para alternar há uma maneira simples de exibir ou ocultar o menu drop-down. 

$ (). Suspensa ( 'alternância')

Exemplos

O exemplo a seguir demonstra o método plug-in menu suspenso (drop-down):

Exemplos

<Nav class = "navbar navbar-default" role = "navegação"> <Div class = "recipiente de líquido"> <Div class = "navbar-header"> <A class = "navbar-brand" href = "#"> W3Cschool < / a> </ Div> <Div ID = "myExample"> <Ul class = "nav navbar-nav" > <Li class = "ativo"> <A href = "#"> iOS < / a> </ Li> <Li> <A href = "#"> SVN < / a> </ Li> <Li class = "dropdown"> <A href = "#" class = "dropdown-toggle" Dados-toggle = "dropdown"> Java <b class = "acento circunflexo"> </ b> </ A> <Ul class = "dropdown-menu"> <Li> <A id = "action-1" href = "#"> jmeter < / a> </ Li> <Li> <A href = "#"> EJB < / a> </ Li> <Li> <A href = "#"> Relatório Jasper </ a> </ Li> <Li class = "divisor"> </ li> <Li> <A href = "#"> isolado ligação </ a> </ Li> <Li class = "divisor"> </ li> <Li> <A href = "#"> outro link isolado </ a> </ Li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav> </ Div> <Script> $ (function () {$ ( "dropdown-toggle".) Suspensa ( 'alternância') ;.}); </ script>

tente »

Os resultados são os seguintes:

Fixo ao topo