JavaScriptを使用してクリックすると展開して閉じます-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptを使用してクリックすると展開して閉じます

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 29, 2023 pm 10:40 PM

最新の Web デザインのニーズが高まるにつれ、動的な効果に対する需要もますます高まっています。一般的なニーズの 1 つは、ボタンまたはリンクをクリックしてコンテンツを展開または閉じることです。現時点では、JavaScript を使用してこの機能を実装できます。

JavaScript は、Web ページ上の HTML と CSS を操作できるだけでなく、ユーザーインタラクションや動的効果を処理できる動的プログラミング言語です。次のデモでは、JavaScript を使用してコンテンツを展開したり閉じたりするボタンを作成します。

まず、HTML ページを作成する必要があります。このページでは、コンテンツを含む DIV 要素と、コンテンツを展開して閉じるボタンを追加します。コードは次のとおりです:

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript点击展开和关闭</title>
      <style>
         .content {
            display: none; /* 隐藏内容 */
         }
      </style>
   </head>
   <body>
      <button onclick="toggle()">点击展开/关闭</button>
      <div class="content">
         <p>我是一个可以展开和关闭的内容。</p>
      </div>
      <script src="script.js"></script>
   </body>
</html>

ログイン後にコピー

上記のコードでは、ボタンと DIV 要素を作成します。DIV 要素には、展開または閉じるコンテンツが含まれています。また、最初は要素が表示されないように、DIV 要素の表示を「なし」に設定します。

次に、JavaScript コードを追加して、展開関数と閉じる関数を実装する必要があります。これらのコードを script.js ファイルに配置します。

let content = document.querySelector('.content');

function toggle() {
   if (content.style.display === 'none') {
      content.style.display = 'block';
   } else {
      content.style.display = 'none';
   }
}

ログイン後にコピー

上記のコードでは、まず「document.querySelector」を使用してコンテンツを含む DIV 要素を取得し、変数「content」に格納します。次に、ボタンがクリックされたときに呼び出される「toggle」という関数を定義します。

「toggle」関数は、「if」ステートメントを使用して、コンテンツ DIV の「display」属性が「none」かどうかを確認します。その場合、「toggle」関数はその「display」プロパティを「block」に設定して、コンテンツを表示します。それ以外の場合、「toggle」関数はその「display」プロパティを「none」に設定し、そのコンテンツを非表示にします。

これで、コンテンツを展開したり閉じる機能が完成しました。ボタンをクリックすると、現在の表示状態に応じて、コンテンツ DIV が表示または非表示になります。独自のデザインのニーズに合わせてスタイルとコードを調整できます。

JavaScript は、Web デザインに多くの動的でインタラクティブな機能を追加できる非常に強力な言語です。この記事が役に立ち、さらに JavaScript プログラミング手法を試すきっかけになったことを願っています。

以上がJavaScriptを使用してクリックすると展開して閉じますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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