Kembangkan dan tutup pada klik dengan javascript-Soal Jawab bahagian hadapan-php.cn

Kembangkan dan tutup pada klik dengan javascript

WBOY

Lepaskan： 2023-05-29 22:40:08

asal

1706 orang telah melayarinya

Memandangkan keperluan reka bentuk web moden terus berkembang, permintaan untuk kesan dinamik semakin meningkat. Salah satu keperluan biasa ialah mengklik butang atau pautan untuk mengembangkan atau menutup kandungan. Pada masa ini, kita boleh menggunakan JavaScript untuk melaksanakan fungsi ini.

JavaScript ialah bahasa pengaturcaraan dinamik yang boleh memanipulasi HTML dan CSS pada halaman web, serta mengendalikan interaksi pengguna dan kesan dinamik. Dalam demo berikut, kami akan menggunakan JavaScript untuk mencipta butang yang mengembangkan dan menutup kandungan.

Pertama, kita perlu membuat halaman HTML. Dalam halaman ini, kami akan menambah elemen DIV yang mengandungi kandungan dan butang yang mengembangkan dan menutup kandungan. Kodnya adalah seperti berikut:

<!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>

Salin selepas log masuk

Dalam kod di atas, kami mencipta butang dan elemen DIV, elemen DIV mengandungi kandungan yang ingin kami kembangkan atau tutup. Kami juga menetapkan paparan elemen DIV kepada "tiada" supaya elemen itu tidak akan dipaparkan pada mulanya.

Seterusnya, kita perlu menambah beberapa kod JavaScript untuk melaksanakan fungsi kembangkan dan tutup. Kami meletakkan kod ini dalam fail script.js.

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

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

Salin selepas log masuk

Dalam kod di atas, kami mula-mula menggunakan "document.querySelector" untuk mendapatkan elemen DIV yang mengandungi kandungan dan menyimpannya dalam pembolehubah "kandungan". Kemudian kami menentukan fungsi yang dipanggil "togol" yang akan dipanggil apabila butang diklik.

Fungsi "togol" menggunakan pernyataan "jika" untuk menyemak sama ada atribut "paparan" kandungan DIV ialah "tiada". Jika ya, fungsi "togol" akan menetapkan sifat "paparan"nya kepada "sekat" supaya ia memaparkan kandungan. Jika tidak, fungsi "togol" akan menetapkan sifat "paparan"nya kepada "tiada", menyembunyikan kandungannya.

Kini kami telah melengkapkan keupayaan untuk mengembangkan dan menutup kandungan. Apabila butang diklik, kandungan DIV akan ditunjukkan atau disembunyikan, bergantung pada keadaan paparan semasanya. Kita boleh melaraskan gaya dan kod mengikut keperluan kita sendiri untuk menyesuaikan diri dengan keperluan reka bentuk kita sendiri.

JavaScript ialah bahasa yang sangat berkuasa yang boleh menambah banyak ciri dinamik dan interaktif pada reka bentuk web. Saya harap artikel ini membantu dan memberi inspirasi kepada anda untuk mencuba lebih banyak teknik pengaturcaraan JavaScript.

Atas ialah kandungan terperinci Kembangkan dan tutup pada klik dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!