前端js和css实现展开/收起效果

作者：System 时间：2024年08月15日分类：所有,css 字数：1217

以下是实现简单的展开/收起效果的前端JavaScript和CSS代码示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>展开收起效果</title>
<style>
  #content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
  }
</style>
</head>
<body>
 
<button onclick="toggleContent()">点击展开/收起</button>
<div id="content">
  这里是可展开和收起的内容。可以根据需要增加更多的文本来测试效果。
</div>
 
<script>
  function toggleContent() {
    var content = document.getElementById('content');
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 'px';
    }
  }
</script>
 
</body>
</html>

CSS:




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

JavaScript:




function toggleContent() {
  var content = document.getElementById('content');
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
  } else {
    content.style.maxHeight = content.scrollHeight + 'px';
  }
}

这段代码通过改变元素的max-height属性来控制内容的显示与隐藏，从而实现展开和收起的效果。点击按钮时，会调用toggleContent函数来切换内容区域的状态。

前端js和css实现展开/收起效果

评论已关闭

推荐阅读