Este artigo descreve o efeito do menu suspenso JS Simulation Bootstrap. Compartilhe -o para sua referência, como segue:
Simular o menu suspenso Bootstrap
Para reduzir um efeito em seu trabalho: clique na barra de navegação, o menu a seguir será exibido, mas ao clicar em outros lugares, o submenu será oculto, o efeito é um pouco semelhante ao "menu suspenso" de bootstrap
Como o estilo do submenu de bootstrap é diferente do design, você precisa escrever um efeito semelhante.
Quando um controle é clicado, o menu suspenso é exibido. No entanto, como pode ser oculto automaticamente quando um local em branco é clicado?
No começo, vinculei um evento OnClick ao corpo. Ao clicar em um local em branco, o evento de clique no corpo é acionado devido à borbulha do evento. No entanto, o problema é que, ao clicar no controle, o evento Body Click também será acionado, resultando na retração do menu suspenso após ser exibido, para que essa ideia esteja incorreta.
Como o Bootstrap implementou esta função, verifique seu código -fonte e encontrou uma solução:
Ligue o documento (oculte seu submenu) e impede que o controle borbulhou ao desencadear o método e impede que ele desencadeie a ligação.
Filtrar a barra de navegação-> <div style = "z-index: 999"> <div> <span onclick = "Showorhideitem (this, event)"> categoria <span> </span> </span> <ul data-show = "hide" style = "z-index: 999;"> <li onClick = jumpto " </span> Housekeeping </span> <pan> </span> <pan> </span> </li> <li onclick = "jumpto (this)" target = "https://www.baidu.com"> <li> <li> <liM> <li> </span> </span> </span.cl) Target = "https://www.baidu.com"> <pan> lanches </span> <pan> </span> </span> </span> </li> </ul> </div> </div> <div> <div> <span onClick = "Showorhideitem (this, event)"> categoria <npan> </span> </spanklick = "ShoworhideItem (this, event)"> categoria <npan> </spange style = "topo: 100%; esquerda: 0px; z-index: 999; exibição: nenhum"> <li onclick = "jumpto (this)" target = "https://www.baidu.com"> </span> target="https://www.baidu.com"> <span>Vegetable1</span> <span></span> <span></span> <span></span> </li> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>Snack1</span> <span></span> <span></span> </ul> </div> </div> <div> <div onclick = "showSearch (this, event)"> <pan> </span> </div> <!-show caixa de pesquisa-> <div> <div style = "topo: 58%; direita: 0px; z-index: 999; exibir: nenhum;" data-search = "hide"> <div> <div> <div style = "margem-direita: 80px;"> <span style = "esquerda: 0px; top: 0px;"> </span> <input PlakeHolder = "Pesquise" OnClick = "Stopevent (this, event)" type = "text") 12px; "> search </botão> </div> </div> </div> </div> </div> </div> </div> </div> <cript> $ (function () {// vincular o evento $ (document) .on (" clique ", function () {// Search the Control, cujo controle é Ul e contém o atribuições de dados (" $ ("UL [S-SHOW = 'SHOW']"). Slide ("Slow"); $ ("Div [Data-search = 'Show']"). CSS ("Display", "Nenhum"). CSS ("Largura", "32%"); var $ currentObj = $ (obj); // Ocultar todas as listas suspensas $ ("UL [Data-Show = 'Show']"). Hide (); // Limpe todas as classes ativas $ CurrentObj.Closest (". Linha"). Find ("Div.Active"). RemoveClass ("Active"); // Adicione o estilo selecionado $ CurrentObj.Closest (". Float_Left"). AddClass ("Active") var $ ul = $ currentObj.closest ("div"). Encontre ("ul"); // UL é o estado expandido se ($ ul.data ("show") == "show") {$ ul.slideup ("lento"); $ ul.attr ("Data-show", "hide"); } else {// UL é o estado expandido $ ul.slacewn ("lento"); $ ul.attr ("Data-show", "show"); // Stop Event Bubble Event.stopPropagation (); }} // Mostrar a função da caixa de pesquisa ShowSearch (obj, evento) {var $ currentObj = $ (obj) .closest (". Float_left"). Find (". Search_cont"). Css ("display", "bloco"); $ currentobj.animate ({width: "100%"}, 1000); $ currentobj.attr ("Data-Search", "Show"); // Stop Event Bubble Event.stopPropagation ();} função stopevent (obj, evento) {// Stop Event Bubbles Event.stopPropagation ();} </sCript>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Javascript Algoritmos e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.