JS implementation display and hide Div (take Baidu map for example)

Main Reference article: https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html

There are two ways to hide and show a div:

Mode 1: Hide still occupy page space, show blank
The div's visibility can control the display and hiding of the Div, but the page appears blank after hiding.
Style= "Visibility:none;"
document.getElementById ("Typediv1"). style.visibility= "hidden";//Hide
document.getElementById ("Typediv1"). style.visibility= "visible";//Display

Mode 2: Release occupied page space after hiding
By setting the Display property, you can make the div hide and release the occupied page space.
Style= "Display:none;"
document.getElementById ("Typediv1"). style.display= "None";//Hide
document.getElementById ("Typediv1"). style.display= "";//Display

Attention:
Use the second way more humane, but, with div.style.display= "none" hidden will cause, div inside the thing dormant, the inside of the event will not respond.

<! DOCTYPE html>body, HTML {width:100%;height:100%;margin:0;font-family: "Microsoft Ya Hei";} #allmap {width:100%;height:80%;} P{margin-left:5px; font-size:14px;} </style> <script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= Your Keys" ></     script> <script type= "Text/javascript" src= "Js/jquery-2.1.3.min.js" ></script> <!--introducing jquery-- <title>js implement show and Hide Div (take Baidu map for example) </title>//Baidu Map InitializationvarMap =NewBmap.map ("Allmap"); Map.centerandzoom (NewBmap.point (116.3964,39.9093), 15); Map.enablescrollwheelzoom ();//Add a custom overlayfunctionZoomcontrol_center () { This. Defaultanchor =Bmap_anchor_top_right;  This. Defaultoffset =NewBmap.size (20, 10);} Zoomcontrol_center.prototype=NewBmap.control (); ZoomControl_Center.prototype.initialize=function(map) {vardiv = document.createelement ("div"); Div.innerhtml= "; Div.style.cursor= "Pointer"; Div.onclick=function(){//Add Response Events        varx = document.getElementById ("Userinfodiv"); //Mode 1,/*if (x.style.display== "None") {x.style.display= "block";                   Show}else{x.style.display= "None"; Hide}*/                //mode 2, native shorthand (ternary operation)        //x.style.visibility=x.style.visibility== "hidden"? Visible ":" Hidden ";                //Way 3,jquery        if($ ("#userInfoDiv"). CSS ("display") = = ' None ') {//if it's hidden,$ ("#userInfoDiv"). CSS ("Display", "block");//Display property set to block (show)}Else{            $("#userInfoDiv"). CSS ("display", "none");    }} map.getcontainer (). appendchild (Div); returnDiv;}; Map.addcontrol (NewZoomcontrol_center ()); Openuserinfodiv ();//Overlay Display ContentfunctionOpenuserinfodiv () {varNewdiv = document.createelement ("div"); Newdiv.id= "Userinfodiv"; NewDiv.style.position= "Absolute"; NewDiv.style.zIndex= "9999"; NewDiv.style.width= "150px"; NewDiv.style.top= "50px"; NewDiv.style.right= "0px"; NewDiv.style.background= "#ffffff"; NewDiv.style.opacity= "0.9"; NewDiv.style.padding= "5px"; NewDiv.style.display= "None";//Hidden    //newdiv.style.visibility= "hidden"; Hidden        varRouteName = "Test route"; varEmpName = "Zhang San"; varTasktimestart = "2016-12-19 19:00:00"; varHtmlstr = "<div style= ' background: #1868bd; color: #fff; ' > "+" <span style= ' margin:10px;padding:0.2em 0;line-height:1.5;font-size:15px ' ><b> "+routename+" < /b></span></div> "+" <ul style= ' margin:0px;padding:15px;color: #1868bd; line-height:1.2; ' > "+" <li><font size= ' 1.5 ' ><b> executives: "+empname+" </b></font></li> "+" < Li><font size= ' 1.5 ' ><b> execution time: </b></font></br><font size= ' 1 ' color= ' #000 ' > ' + tasktimestart+ "</font></li>" + "</ul>"; Newdiv.innerhtml=Htmlstr; document.getElementById ("Allmap"). appendchild (Newdiv);}</script>

Brief introduction:

1. Baidu map initialization, pay attention to add Baidu map keys key;

2. Add a custom overlay to click on the event;

3. Add overlay to display the content;

4. Response events for adding overlays

JS implementation display and hide Div (take Baidu map for example)