В этой статье описывается эффект раскрывающегося меню Bootstrap JS Bootstrap. Поделитесь этим для вашей ссылки, следующим образом:
Симулировать раскрывающееся меню Bootstrap
Чтобы сократить эффект в вашей работе: нажмите на панель навигации, появится следующее меню, но при щелчке в других местах подменю будет скрыт, эффект немного похож на «раскрывающееся меню» начальной загрузки.
Поскольку стиль подменю Bootstrap отличается от дизайна, вам нужно написать аналогичный эффект самостоятельно.
Когда элемент управления нажимается, отображается раскрывающееся меню. Однако, как он может быть автоматически скрыт, когда нажимается пустое место?
Вначале я связал событие OnClick с телом. Нажав на пустое место, событие Click Body запускается из -за пузырьков события. Тем не менее, проблема в том, что при щелчке управления событие Click Click также будет запускается, что приводит к отображению меню после его отображения, поэтому эта идея неверна.
С тех пор, как Bootstrap реализовал эту функцию, проверьте его исходный код и нашел решение:
Свяжите документ (скрыть его подменю) и предотвращает пузырька управления при запусках метода и предотвращает его запуск связывания.
<!-Навигационная панель фильтров-> <div style = "z-index: 999"> <div> <span onclick = "showorhideitem (this, event)"> Категория <pan> </span> </span> <ul data shef = "hide" style = "z-index: 999; target = "https://www.baidu.com"> <pan> домашнее хозяйство </span> <pran> </span> <pan> </span> </li> <li onclick = "jumpto (this)" target = "https://www.baidu.com"> <pran> овощи </span> <pran> <//span> <pran> </span> <pran> <//span> <pran> <//span> <pran> </span> <pran> <pran> <pran> <pran> <pran> <span> <pran> <pan> <pran> <pran> <pran> <pran> <pran> <pran> <pran> <pran> <pan> onclick = "jumpto (this)" target = "https://www.baidu.com"> <pan> закуски </span> <pran> </span> <pan> </span> </li> </ul> </div> </div> <div> <div> <pan onclick = "showorHideItem (это, событие) DATA-SHOW = "HIDE" style = "top: 100%; слева: 0px; z-index: 999; дисплей: нет"> <li onclick = "jumpto (this)" target = "https://www.baidu.com"> <prane> housekeeping1 </span> <pan> span> <pran> </span> </liplick = "jum ytptic nteplicc ytplic nteplick = target = "https://www.baidu.com"> <pan> eventable1 </span> <pran> </span> <pan> </span> <pan> </span> </li> <li onclick = "jumpto (this)" target = "https://www.baid. </ul> </div> </div> <div> <div onclick = "showearch (this, event)"> <pan> </span> </div> <!-Показать окно поиска-> <div> <div style = "top: 58%; справа: 0px; z-index: 999; Показать: нет;" data-search = "hide"> <div> <div> <div style = "margin-right: 80px;"> <span style = "слева: 0px; top: 0px;"> </span> <input waceholder = "search" onclick = "stoppevent (this, event)" type = "text" value = ""> </div> <div> <buttond type = "style style =" styld = "styled valid =" value = ""> </div> <div> <div> <buttond = "style". 12px; "> search </button> </div> </div> </div> </div> </div> </div> </div> </div> <script> $ (function () {// Связывать событие $ (document) .on (" click ", function () {// Поиск управления, чей контроль и содержит атрибут-show =". $ ("ul [data-show = 'show']"). Slideup ("Slow"); $ ("div [data-search = 'show']"). CSS ("Display", "non"). CSS ("ширина", "32%"); var $ currentObj = $ (obj); // скрыть все раскрывающиеся списки $ ("ul [data-show = 'show']"). Hide (); // Очистить все активные классы $ currentObj.closest (". // Добавить выбранный стиль $ currentObj.closest (". Float_left"). AddClass ("active") var $ ul = $ currentObj.closest ("div"). Найти ("ul"); // ul - расширенное состояние if ($ ul.data ("show") == "show") {$ ul.slideup ("Slow"); $ ul.attr ("Data-Show", "Hide"); } else {// ul - расширенное состояние $ ul.sliddown ("Slow"); $ ul.attr ("Data-Show", "Show"); // Stop Event Event Event Event.stoppropagation (); }} // Показать функцию поиска ShowEarch (obj, event) {var $ currentObj = $ (obj) .closest (". Float_left"). Найти (". $ currentObj.animate ({width: "100%"}, 1000); $ currentObj.attr ("search", "Show"); // Stop Event Bubble Event Event.stoppropagation ();} функция stopevent (obj, event) {// stop event event 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 »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.