Термин «простой скользящий аккордеон», похоже, не является широко используемой фразой или конкретной концепцией программирования на английском языке. Однако, исходя из этого термина, похоже, что он относится к компоненту пользовательского интерфейса, который сочетает в себе функции простого аккордеона и скользящей анимации. Я приведу вам пример того, как можно создать простой скользящий компонент-аккордеон с помощью HTML, CSS и JavaScript.
HTML:
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Section 1</div>
<div class="accordion-content">
<p>This is the content of section 1.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Section 2</div>
<div class="accordion-content">
<p>This is the content of section 2.</p>
</div>
</div>
</div>
CSS:
.accordion {
width: 100%;
}
.accordion-item {
border-bottom: 1px solid #ccc;
}
.accordion-header {
background-color: #f1f1f1;
padding: 10px;
cursor: pointer;
}
.accordion-content {
padding: 10px;
display: none;
}
.accordion-content.show {
display: block;
}
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
const accordionItems = document.querySelectorAll('.accordion-item');
accordionItems.forEach(function(item) {
const header = item.querySelector('.accordion-header');
const content = item.querySelector('.accordion-content');
header.addEventListener('click', function() {
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
});
});
В этом примере у нас есть контейнер-аккордеон (div
с классом «аккордеон»), состоящий из нескольких элементов-аккордеона. Каждый элемент имеет заголовок (div
с классом «accordion-header») и содержимое (div
с классом «accordion-content»). Изначально содержимое скрыто (в CSS для отображения установлено значение «нет»). Когда пользователь нажимает на заголовок аккордеона, соответствующий контент перемещается вниз или вверх, переключая его видимость.