cari

Rumah >hujung hadapan web >tutorial js >js melaksanakan kod kesan menu lungsur yang mengklik untuk mengembangkan kemahiran downward_javascript

js melaksanakan kod kesan menu lungsur yang mengklik untuk mengembangkan kemahiran downward_javascript

WBOY
WBOYasal
2016-05-16 15:41:211540semak imbas

Contoh dalam artikel ini menerangkan kod js yang melaksanakan kesan menu lungsur klik ke bawah untuk mengembangkan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah kod js untuk melaksanakan kod kesan khas menu lungsur klik-bawah. Ia adalah menu lungsur JS yang sebenar. anda boleh menguji dan membetulkannya sendiri Artikel ini hanya menyediakan kod asas untuk rujukan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

<!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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery melaksanakan kesan menu lungsur sekunder standard gaya kelabu-biru code_jqueryArtikel seterusnya：jQuery melaksanakan kesan menu lungsur sekunder standard gaya kelabu-biru code_jquery

Artikel berkaitan

Lihat lagi