O capítulo do menu suspenso Bootstrap explica o menu suspenso, mas não envolve a parte da interação. Este capítulo explicará a interação do menu suspenso em detalhes. Usando o plug -in suspenso, você pode adicionar menus suspensos a qualquer componente (como barras de navegação, guias, menus de navegação de cápsulas, botões, etc.).
Se você deseja fazer referência à funcionalidade do plug -in separadamente, é necessário fazer referência ao DropDown.js. Ou, como mencionado no capítulo Visão geral do plug -in Bootstrap, você pode consultar o bootstrap.js ou versões compactadas do bootstrap.min.js.
1. Uso
Você pode alternar o conteúdo oculto do menu suspenso (suspensão) do plug -in:
1. Use o atributo de dados: adicione data-toggle = "suspenso" ao link ou botão para alternar o menu suspenso, como mostrado abaixo:
<div> <a data-toggle = "suspenso" href = "#"> gatilho suspenso </a> <ul role = "menu" aria-labelledby = "dlabel"> ... </ul> </div>
Se você precisar manter o link intacto (útil quando o navegador não habilitar o JavaScript), use a propriedade-alvo de dados em vez de href = "#":
<div> <a id = "dlabel" role = "button" data-toggle = "suspenso" data-target = "#" href = "/page.html"> menu suspenso (suspensão) </span> </a> <l Role = "menu" aria-labelledby = "Dlabel"> ... //ul.
2. Através do JavaScript: Para alternar JavaScript, use o seguinte método:
$ ('. Dropados-toggle'). Dropdown ()
2. Exemplo simples de menu suspenso
Em uso geral, o código é o mesmo que os métodos de componentes:
// Uso declarativo <div> <button data-toggle = "suspenso"> menu suspenso <span> </span> </butut> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> produto </a> </li> <li> <a> <a href = "#"> produto </a> </li> <li> <a> href = "#"> sobre </a> </li> </ul> </div>
O principal núcleo do uso declarativo:
1. Use pacotes para recipientes periféricos;
2. Ligação de data-toggle = "suspenso" para um evento interno de botão de clique;
3. Use elementos do menu.
// Se o botão estiver fora do contêiner, ele poderá ser ligado através do alvo de dados. <button id = "btn" data-toggle = "suspenso" data-target = "#suspenso"> em chamadas de javascript, não há propriedades e o método não é fácil de usar. A seguir, são quatro eventos básicos. // Método do menu suspenso, mas ainda preciso de dados-*$ ('#BTN'). DropDown (); $ ('#BTN'). Droptown ('alternativa');O menu suspenso suporta 4 tipos de eventos, correspondendo a antes do pop-up, após o pop-up, antes de fechar e depois de fechar.
// eventos, outros $ ('#suspenso').3. Uso de menus suspensos na página da guia
<!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 tags com menu suspenso </p> <ul> <li> <a href = "#"> home </a> </li> <li> <lif = "#"> svn </a> href = "#"> iOS </a> </li> <li> <a href = "#"> vb.net </a> </li> <li> <a data-toggle = "suspenso" href = "#" java <pan> </span> <ul> <ul> <li> <ahref = "> href = "#"> jmeter </a> </li> <li> <a href = "#"> ejb </a> </li> <li> <a href = "#"> link assinado </a> </li> </li> </li> <a <a href = "#"> php </a>
Imagem de reprodução:
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.