Contoh dalam artikel ini menerangkan pelaksanaan kesan menu akordion yang boleh dilipat dan dikembangkan menggunakan js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah menu yang boleh dilipat dan boleh dikembangkan, menu akordion, menu halaman web yang runtuh dan diregangkan yang dilaksanakan menggunakan teknologi CSS dan JavaScript.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-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=gb2312" /> <title>折叠展开的菜单</title> </head> <body><style type="text/css"> .menutitle{ cursor:pointer; margin-bottom: 5px; background-color:#ECECFF; color:#000000; width:140px; padding:2px; text-align:center; font-weight:bold; /*/*/border:1px solid #000000;/* */ } .submenu{ margin-bottom: 0.5em; } </style> <script type="text/javascript"> if (document.getElementById){ //DynamicDrive.com change document.write('<style type="text/css">\n') document.write('.submenu{display: none;}\n') document.write('</style>\n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change if(el.style.display != "block"){ //DynamicDrive.com change for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") //DynamicDrive.com change ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } </script> <!-- Keep all menus within masterdiv--> <div id="masterdiv"> <div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div> <span class="submenu" id="sub1"> - <a href="#">What's New</a><br> - <a href="#">What's hot</a><br> - <a href="#">Revised Scripts</a><br> - <a href="#">More Zone</a> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div> <span class="submenu" id="sub2"> - <a href="#">Usage Terms</a><br> - <a href="#">DHTML FAQs</a><br> - <a href="#">Scripts FAQs</a> </span> <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div> <span class="submenu" id="sub3"> - <a href="#">Coding Forums</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div> <span class="submenu" id="sub4"> - <a href="http://www.javascriptkit.com">JavaScript Kit</a><br> - <a href="http://www.jb51.net">脚本之家</a><br> - <a href="http://www.cooltext.com">Cool Text</a><br> </span> </div> </body> </html>
Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.