Cet article décrit l'effet du menu déroulant Bootstrap de simulation JS. Partagez-le pour votre référence, comme suit:
Simuler le menu déroulant Bootstrap
Pour couper un effet dans votre travail: cliquez sur la barre de navigation, le menu suivant apparaîtra, mais lorsque vous cliquez sur d'autres endroits, le sous-menu sera caché, l'effet est un peu similaire au "menu déroulant" de bootstrap
Étant donné que le style du sous-menu bootstrap est différent de la conception, vous devez écrire vous-même un effet similaire.
Lorsqu'un contrôle est cliqué, le menu déroulant s'affiche. Cependant, comment peut-il être automatiquement masqué lorsqu'un endroit vide est cliqué?
Au début, j'ai lié un événement OnClick au corps. Lorsque vous cliquez sur un endroit vide, l'événement de clic est déclenché en raison de la bouillonnement de l'événement. Cependant, le problème est que lorsque vous cliquez sur le contrôle, l'événement de clic corporel sera également déclenché, ce qui entraînera le menu déroulant après son affichage, donc cette idée est incorrecte.
Depuis que Bootstrap a implémenté cette fonction, vérifiez son code source et trouvé une solution:
Liez le document (masquer son sous-menu) et empêche le contrôle de bouillonner lors du déclenchement de la méthode et l'empêche de déclencher la liaison.
<! - Filter Navigation Bar -> <div style = "z-index: 999"> <div> <spann onclick = "showorHideItem (this, event)"> catégorie <span> </span> </span> <ul data-show = "hide" style = "z-index: 999;"> <li onClick = "Jumpto (this)" Target = "https://www.baidu.com"> <span> Housekeeping </span> <span> </span> <span> </span> </li> <li onclick = "Jumpto (this)" Target = "https://www.baidu.com"> <pan> </pander> <pander> onclick = "Jumpto (this)" target = "https://www.baidu.com"> <span> snacks </span> <span> </span> <span> </span> </li> </ul> </div> </ div> <div> <div> <span onclick = "showorHideItem (this, event)"> category <pander> data-show = "mashing" style = "top: 100%; gauche: 0px; z-index: 999; affichage: Aucun"> <li onclick = "Jumpto (this)" Target = "https://www.baidu.com"> <span> housekeeping1 </span> <pan> </span> <pander> </pan> </li> <li on onclick = "jum (this)" this) " Target = "https://www.baidu.com"> <span> Vegetable1 </span> <span> </span> <span> </span> <span> </span> </li> <li onclick = "jumpto (this)" Target = "https://www.baidu.com"> <pander> snack1 </pannet> </ul> </div> </div> <div> <div onClick = "showearch (this, event)"> <span> </span> </div> <! - Afficher la boîte de recherche -> <div> <div style = "top: 58%; droite: 0px; z-index: 999; affichage: aucun;" Data-Search = "Hide"> <div> <div> <div style = "margin-droite: 80px;"> <span style = "Left: 0px; top: 0px;"> </span> <entrée placeholder = "search" onClick = "stopevent (this, event)" type = "text" value = ""> </v> <div> <bouton type = "bouton" bouton = "padding: 4x: 4x: 12px; "> Search </futton> </div> </div> </div> </div> </div> </div> </div> </div> <script> $ (function () {// lier l'événement $ (document) .on (" cliquez " $ ("ul [data-show = 'show']"). Slideup ("lent");}); $ (document) .on ("cliquez", fonction () {// Recherchez le contrôle dont le contrôle est div et contient l'attribut data-show = "show", s'il y a, modifiez sa propriété CSS. $ ("div [data-search = 'show']"). css ("afficher", "aucun"). var $ currentObj = $ (obj); // masquer toutes les listes déroulantes $ ("ul [data-show = 'show']"). Hide (); // effacer toutes les classes actives $ currentObj.closest (". Row"). Rechercher ("div.active"). Reposovelass ("active"); // Ajouter le style sélectionné $ currentObj.closest (". Float_left"). AddClass ("actif") var $ ul = $ currentobj.closest ("div"). Find ("ul"); // ul est l'état élargi if ($ ul.data ("show") == "show") {$ ul.slideUp ("lent"); $ ul.attr ("Data-show", "masquer"); } else {// ul est l'état élargi $ ul.slidedown ("lent"); $ ul.attr ("Data-show", "show"); // Stop Event Bubble Event Event.Stoppropagation (); }} // Afficher la fonction de recherche de recherche showearch (obj, événement) {var $ currentObj = $ (obj) .closest (". Float_left"). Find (". Search_cont"). Css ("affiche", "block"); $ currentObj.animate ({width: "100%"}, 1000); $ currentObj.attr ("Data-Search", "Show"); // stop event bubble event event.stoppropagation ();} function stotevent (obj, événement) {// stop event bubble event.stoppropagation ();} </cript>Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.