JavaScript 折りたたみ可能領域の実装コード_JavaScript スキル

技術的な実装の鍵: 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 を導入する必要がある場合は、更新して実行する必要があります

]

コードの効果は次のとおりです:

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。