技術的な実装の鍵: CSS の表示機能を使用します。 表示機能の値は、none と block です。 none は非表示を意味し、block は表示を意味します。 ハンズオン前のデザイン: 折りたたみ可能な領域は、タイトル バーとコンテンツ領域の 2 つの領域に分かれています。タイトル バーは常に表示され、コンテンツ セクションは折りたたんだり展開したりできます。このページでは、2 つの 要素を使用してこのデザインを個別に実装できます。 実装手順: ページに 要素を挿入し、折りたたみ機能を実装するための JS コードを追加します。 コードは次のとおりです: <title></title> <div style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer" onclick="toggle('divContent1')"> </div>ここをクリック<div id="divContent1" style="border:3px solid blue;height:100px;padding:10px"> </div> これは表示または非表示にするコンテンツです。 <p> </p> <div style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer" onclick="toggle('divContent2')"> </div>ここをクリック<div id="divContent2" style="border:3px solid blue;height:100px;padding:10px"> </div> これは表示または非表示にするコンテンツです。 [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ] コードの効果は次のとおりです: function toggle(sDivId) { var oDiv = document.getElementById(sDivId); oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none"; }
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
