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

Source: Internet
Author: User

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

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.