This article describes the effect of JS simulation bootstrap drop-down menu. Share it for your reference, as follows:
Simulate bootstrap drop-down menu
To cut an effect in your work: click on the navigation bar, the following menu will appear, but when clicking on other places, the submenu will be hidden, the effect is a bit similar to the "drop-down menu" of bootstrap
Since the style of the bootstrap submenu is different from the design, you need to write a similar effect yourself.
When a control is clicked, the drop-down menu is displayed. However, how can it be automatically hidden when a blank place is clicked?
At the beginning, I bound an onclick event to the body. When clicking on a blank place, the click body event is triggered due to the bubbling of the event. However, the problem is that when clicking the control, the body click event will also be triggered, resulting in the drop-down menu being retracted after it is displayed, so this idea is incorrect.
Since bootstrap has implemented this function, check its source code and found a solution:
Bind the document (hide its submenu), and prevents the control from bubbled when triggering the method and prevents it from triggering the binding.
<!-- Filter navigation bar--><div style="z-index: 999"> <div> <span onclick="showOrHideItem(this,event)"> Category<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"> <span>Vegetables</span> <span></span> <span></span> </li> <li 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<span></span> </span> <ul data-show="hide" style="top:100%;left: 0px;z-index: 999;display: none"> <li onclick="jumpTo(this)" target="https://www.baidu.com"> <span>Housekeeping1</span> <span></span> <span></span> </li> <li onclick="jumpTo(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"> <span>Snack1</span> <span></span> <span></span> </ul> </div></div><div> <div onclick="showSearch(this,event)"> <span></span> </div> <!-- Show search box--> <div> <div style="top:58%;right: 0px;z-index: 999;display: none;" data-search="hide"> <div> <div> <div style="margin-right: 80px;"> <span style="left: 0px;top:0px;"></span> <input placeholder="Search" onclick="stopEvent(this,event)" type="text" value=""> </div> <div> <button type="button" style="padding: 4px 12px;">Search</button> </div> </div> </div> </div> </div> </div> </div> </div><script>$(function(){ //Bind the event $(document).on("click",function(){ //Search the control whose control is ul and contains the attribute data-show="show". If there is, let it hide it $("ul[data-show='show']").slideUp("slow"); }); $(document).on("click",function(){ //Search the control whose control is div and contains the attribute data-show="show", if there is, modify its css property. $("div[data-search='show']").css("display","none").css("width","32%"); });});//Show or close filtering conditions function showOrHideItem(obj,event){// alert(arguments.callee);// alert(showOrHideItem.caller); var $currentObj = $(obj); //Hide all drop-down lists $("ul[data-show='show']").hide(); //Clear all active classes $currentObj.closest(".row").find("div.active").removeClass("active"); //Add the selected style $currentObj.closest(".float_left").addClass("active") var $ul = $currentObj.closest("div").find("ul"); //ul is the expanded state if($ul.data("show") == "show"){ $ul.slideUp("slow"); $ul.attr("data-show","hide"); }else{ //ul is the expanded state $ul.slideDown("slow"); $ul.attr("data-show","show"); //Stop event bubble event event.stopPropagation(); }}//Show search box function showSearch(obj,event){ var $currentObj = $(obj).closest(".float_left").find(".search_cont").css("display","block"); $currentObj.animate({ width: "100%" }, 1000 ); $currentObj.attr("data-search","show"); //Stop event bubble event event.stopPropagation();}function stopEvent(obj,event){ //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 traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.