js实现点击显示和隐藏
实现点击显示和隐藏的JavaScript方法
使用classList.toggle切换类名
通过添加/移除CSS类控制元素的显示与隐藏，需提前在CSS中定义隐藏样式（如display: none）。
const button = document.getElementById('toggleButton');
const element = document.getElementById('content');
button.addEventListener('click', () => {
element.classList.toggle('hidden');
});CSS部分需配合：
.hidden {
display: none;
}直接修改style属性
动态改变元素的display或visibility属性实现即时切换。
const button = document.querySelector('.toggle-btn');
const box = document.querySelector('.box');
button.addEventListener('click', () => {
if (box.style.display === 'none') {
box.style.display = 'block';
} else {
box.style.display = 'none';
}
});使用jQuery的toggle方法
若项目已引入jQuery库，可简化代码实现相同效果。
$('#toggleButton').click(function() {
$('#content').toggle();
});动态添加/移除DOM元素
适用于需要完全移除元素的场景，但性能消耗较大。
document.getElementById('btn').addEventListener('click', function() {
const target = document.getElementById('target');
if (target.parentNode) {
target.parentNode.removeChild(target);
} else {
document.body.appendChild(target);
}
});注意事项
- 优先使用classList方式，便于维护和扩展样式
- 频繁操作DOM时建议使用文档片段（DocumentFragment）优化性能
- 移动端注意添加
touchstart事件兼容触摸操作 - 可结合CSS过渡效果实现平滑的显示/隐藏动画
