完成したアコーディオンエフェクトは次のとおりです。詳細についてはコードを参照してください: HTML コード コードをコピー コードは次のとおりです: アコーディオン <br>#accordion{ <br>width:200px; <br>} <br>#accordion ul{ <br>リストスタイル: なし; <br>表示: なし; <br>.first-level{ <br>背景色: #d8d8d8; 0.53); <br> 表示: ブロック; <br> マージン: 2px 0 0 0; <br>最小高さ : 0; <br>} <br> 🎜> 最初の項目 2 番目の項目 ;h3 class="first -level">レベル 1 2 番目のアイテム ;レベル 1最初の項目 /li> <br>var heads = document.querySelectorAll(".first-level"); <br>function headClick(event){ <br>var target = EventUtil.getTarget(event); .parentNode.querySelector(" ul")); <br>} <br>for(var i=0;i<heads.length>EventUtil.addHandler(heads[i], "click", headClick); <br> } <br><br>window.onunload = function (){ <br>for(var i=0;i<heads.length>EventUtil.removeHandler(heads[i ], "クリック", headClick); <br>} <br>heads = null <br>} <br><br> <br>common.js ファイル<br><br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><br> <br>var EventUtil = { <br>addHandler : function (element, type, handler) { <br>if (element.addEventListener) { <br> element.addEventListener(type, handler, false); <br>} else if (element.attachEvent) { <br>element.attachEvent("on" type, handler); } else { <br>element[" on" type] = ハンドラー; <br>} <br>}, <br>removeHandler : function (element, type, handler) { <br>if (element.removeEventListener) { <br>element.removeEventListener(type, handler , false); </heads.length></heads.length> </div>} else if (element.detachEvent) { <br>element.detachEvent("on" type, handler); else { <br>element ["on" タイプ] = null; <div class="codetitle">} <span>}, <a style="CURSOR: pointer" data="49681" class="copybut" id="copybut49681" onclick="doCopy('code49681')">getEvent : 関数 (イベント) { <u>return イベント </u>}, </a>getTarget : 関数(イベント) { </span>return イベント .target || </div>} <div class="codebody" id="code49681">} <br><br><br>var getStyle = function (el, style) { <br>if (el .currentStyle) { <br>style = style.replace(/-(w)/g, function (all, Letter) { <br>return Letter.toUpperCase(); <br>}); el.currentStyle[スタイル]; <br>戻り値; <br>} else { <br>return document.defaultView.getComputedStyle(el, null).getPropertyValue(style); <br>} <br>} <br> <br><br>var toggleDisplay = function (element) { <br>var display = getStyle(element, "display"); <br>if (display == "none") { <br>element.style.display = "ブロック"; <br>} else { <br>element.style.display = "なし" <br>} <br>} <br><br><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
