js实现点击显示隐藏
使用 classList.toggle 方法
通过 classList.toggle 方法可以轻松切换元素的显示和隐藏状态。该方法会自动检查元素是否包含指定的类名，如果存在则移除，不存在则添加。
const button = document.querySelector('.toggle-button');
const element = document.querySelector('.element-to-toggle');
button.addEventListener('click', () => {
element.classList.toggle('hidden');
});对应的 CSS 样式：
.hidden {
display: none;
}使用 style.display 属性
直接操作元素的 style.display 属性可以实现更灵活的显示隐藏控制。这种方式不需要预先定义 CSS 类。
const button = document.querySelector('.toggle-button');
const element = document.querySelector('.element-to-toggle');
button.addEventListener('click', () => {
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
});使用 jQuery 的 toggle 方法
如果项目中使用了 jQuery 库，可以使用其内置的 toggle 方法简化代码。jQuery 的 toggle 方法会自动处理元素的显示状态切换。
$('.toggle-button').click(function() {
$('.element-to-toggle').toggle();
});使用 aria-hidden 属性增强可访问性
为了提升可访问性，可以结合 aria-hidden 属性来控制元素的显示隐藏。这种方法对屏幕阅读器等辅助技术更友好。
const button = document.querySelector('.toggle-button');
const element = document.querySelector('.element-to-toggle');
button.addEventListener('click', () => {
const isHidden = element.getAttribute('aria-hidden') === 'true';
element.setAttribute('aria-hidden', !isHidden);
element.style.display = isHidden ? 'block' : 'none';
});动画效果实现
如果需要平滑的过渡效果，可以使用 CSS transition 配合 max-height 或 opacity 属性。
const button = document.querySelector('.toggle-button');
const element = document.querySelector('.element-to-toggle');
button.addEventListener('click', () => {
if (element.style.maxHeight) {
element.style.maxHeight = null;
} else {
element.style.maxHeight = element.scrollHeight + 'px';
}
});对应的 CSS 样式：
.element-to-toggle {
overflow: hidden;
transition: max-height 0.3s ease-out;
}
