Home >Web Front-end >JS Tutorial >js implements the drop-down menu effect code that clicks to expand downward_javascript skills

js implements the drop-down menu effect code that clicks to expand downward_javascript skills

WBOYOriginal: 2016-05-16 15:41:211540browse

The example in this article describes the js code that implements the drop-down menu effect of clicking down to expand. Share it with everyone for your reference. The details are as follows:

Here is the js code to implement click-down expansion drop-down menu special effects code. No jQuery is called. It is a real JS drop-down menu. The compatibility has not been tested. If you find it useful, you can test and correct it yourself. This article only provides basic code for reference. refer to.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单</title>
<style type="text/css">
*{margin:0; padding:0}
#nav{width:200px; margin:50px}
#nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff}
#nav a{display:block; line-height:24px;color:#666666}
#nav a:hover{background-color:#eee; color:#000;}
#nav div{display:none; border:1px solid #000; border-top:none}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
window.onload = function(){
 $("nav").onclick = function(e){
 var src = e&#63;e.target:event.srcElement;
 if(src.tagName == "H3"){
  var next = src.nextElementSibling || src.nextSibling;
  next.style.display = (next.style.display =="block")&#63;"none":"block";
 }
 }
}
</script>
</head>
<body>
<div id="nav">
 <h3>管理区</h3>
  <div>
   <a href="#">建议</a>
    <a href="#">链接</a>
    <a href="#">联系</a>
  </div>
  <h3>交流区</h3>
  <div>
   <a href="#">JavaScript</a>
    <a href="#">Delphi</a>
    <a href="#">VC++</a>
  </div>
</div>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implements gray-blue style standard secondary drop-down menu effect code_jqueryNext article：jQuery implements gray-blue style standard secondary drop-down menu effect code_jquery

See more

js implements the drop-down menu effect code that clicks to expand downward_javascript skills

Related articles