Bagaimana untuk melaksanakan susun atur akordion mudah menggunakan HTML dan CSS-html tutorial-php.cn

Bagaimana untuk melaksanakan susun atur akordion mudah menggunakan HTML dan CSS

王林

Lepaskan： 2023-10-18 12:21:16

asal

2217 orang telah melayarinya

Bagaimana untuk melaksanakan susun atur akordion mudah menggunakan HTML dan CSS

Cara menggunakan HTML dan CSS untuk melaksanakan susun atur panel akordion yang mudah

Panel akordion ialah salah satu susun atur yang biasa digunakan dalam reka bentuk web . Ia boleh Mempersembahkan sejumlah besar kandungan pada halaman dalam bentuk terlipat, menjadikan struktur halaman lebih jelas dan lebih padat. Artikel ini akan memperkenalkan secara terperinci cara menggunakan HTML dan CSS untuk melaksanakan susun atur panel akordion yang ringkas dan memberikan contoh kod khusus.

reka bentuk struktur HTML

Pertama sekali, kita perlu mereka bentuk struktur HTML yang sesuai untuk melaksanakan susun atur panel akordion. Struktur asas terdiri daripada bekas yang membalut keseluruhan panel akordion, dan berbilang item akordion. Setiap akordion termasuk tajuk dan bahagian kandungan. Berikut ialah contoh struktur HTML asas:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">折叠项1</div>
    <div class="accordion-content">折叠内容1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">折叠项2</div>
    <div class="accordion-content">折叠内容2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">折叠项3</div>
    <div class="accordion-content">折叠内容3</div>
  </div>
</div>

Salin selepas log masuk

reka bentuk gaya CSS

Seterusnya, kita perlu mereka bentuk gaya CSS untuk melaksanakan lipatan Kesan panel. Mula-mula tentukan gaya kontena bagi keseluruhan panel akordion:

.accordion {
  width: 100%;
}

Salin selepas log masuk

Kemudian tentukan gaya item akordion, termasuk tajuk dan bahagian kandungan:

.accordion-item {
  margin-bottom: 10px;
}

.accordion-header {
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
}

Salin selepas log masuk

Tambah acara klik pada tajuk item akordion , digunakan untuk mencapai kesan lipatan dan bukaan. Apabila mengklik pada tajuk, anda perlu menukar paparan dan keadaan tersembunyi bahagian kandungan:

.accordion-header {
  /* ... */
}

.accordion-header.active {
  background-color: #ccc;
}

.accordion-content {
  /* ... */
}

.accordion-content.active {
  display: block;
}

Salin selepas log masuk

Reka bentuk interaksi JavaScript

Dalam susunan untuk mencapai dinamik Kesan lipatan dan pengembangan, kita perlu menggunakan beberapa kod JavaScript untuk mengendalikan acara klik. Berikut ialah contoh kod mudah:

var accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(function(header) {
  header.addEventListener('click', function() {
    var accordionContent = this.nextElementSibling;
    this.classList.toggle('active');
    accordionContent.classList.toggle('active');
  });
});

Salin selepas log masuk

Dengan kod di atas, kami menambah pendengar acara klik pada tajuk setiap item yang runtuh. Apabila tajuk diklik, kami menggunakan nama kelas classList.toggle方法来切换标题和内容部分的active untuk mencapai kesan bertukar antara paparan dan penyembunyian.

Sepadukan kod dan uji

Akhir sekali, integrasikan kod HTML, CSS dan JavaScript bersama-sama dan uji kesan dalam penyemak imbas. Pastikan pengepala HTML menyertakan fail CSS dan JavaScript.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- HTML结构代码 -->
</body>
</html>

Salin selepas log masuk

Di atas ialah pengenalan terperinci dan contoh kod tentang cara menggunakan HTML dan CSS untuk melaksanakan susun atur panel akordion yang ringkas. Anda boleh melaraskan gaya dan reka bentuk interaksi mengikut keperluan anda sendiri untuk mencipta susun atur panel lipat yang lebih selaras dengan keperluan peribadi anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur akordion mudah menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!