前端js和css实现展开/收起效果，、不使用overflow-DPDK中文网

如果你不想使用overflow属性来实现展开/收起效果，可以尝试使用JavaScript和CSS来实现。以下是一种可能的解决方案：

HTML结构：

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
  <button id="toggleButton">展开/收起</button>
</div>

CSS样式：

.container {
  position: relative;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.show-content .content {
  max-height: none;
}

JavaScript代码：

const toggleButton = document.getElementById('toggleButton');
const content = document.querySelector('.content');

toggleButton.addEventListener('click', function() {
  content.classList.toggle('show-content');
});

以上代码中，我们通过点击按钮来切换.content元素的高度。默认情况下，它的最大高度设置为0，并且隐藏内容（通过overflow: hidden;实现）。当点击按钮时，添加或移除.show-content类，使得.content元素的最大高度变为none，从而显示全部内容。

这种方法利用了CSS的过渡效果（transition）以及JavaScript控制类的添加/删除来实现展开/收起效果。你可以根据需要调整动画效果、过渡时间等细节。希望对你有所帮助！

内容由零声教学AI助手提供，问题来源于学员提问