How to realize Hidden drop-down Box by javascript

This article mainly explains "javascript how to achieve hidden drop-down box", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "javascript how to achieve hidden drop-down box" bar!

The way javascript implements the hidden drop-down box effect: [function moreCon () {var backg = document.getElementById ('colorChange'); var mdiv = document...].

This article operating environment: windows10 system, javascript 1.8.5, thinkpad T480 computer.

Clicking to show or hide the drop-down box is a common effect at work, so how to achieve this effect?

Let's first take a look at the results of the implementation:

Specific implementation code:

JS Click to show or hide the drop-down box html,body,div,ul,li {padding: 0 position margin: 0;} li {list-style: none;} a {text-decoration: none;color: # ccc;font-size: 13px;} # top {width: 100% top background: # 2D2D2Dmitt height: 30px;} .topli {float: left;height: 30px;} .topli {display:block;padding: 014pxheight: } .topli a:hover {background:#444;} .more {position: absolute;top: 30pxpolitical background: # fff;display: none;border: 1px solid # C2c2c2a:hover: 999borderMethotop: none;} .more a {color: # 3366CC;} .more a:hover {background:# f0f0f0;} function moreCon () {var backg = document.getElementById ('colorChange'); / / define the variable var mdiv = document.getElementById (' moreContent') If (mdiv.style.display=='block') {/ / if else determines whether the display where ID is moreContent is block "=" equals "equals" as the comparison operator mdiv.style.display='none'; backg.style.background='#2D2D2D'; / / modifies the style backg.style.color='#ccc' } else {mdiv.style.display='block'; backg.style.background='#fff'; backg.style.color='#3366CC';}} search for picture map news