javascript 简单抽屉效果的实现代码

JavaScript 简单抽屉效果，指的是当用户点击某个按钮或者元素时，让一个层次结构的一部分向上或向下展开或收起，制造出一种抽屉效果。实现这种效果需要用到 JavaScript 的基本 DOM 操作和 CSS 属性的处理。

实现步骤

1.HTML和CSS代码编写

首先，需要在 HTML 中定义一个包含展开和收起内容的容器。在这个容器内，需要有一个按钮或者元素，用于切换内容的显示状态。在CSS中，需要设定容器的初始状态和动画效果。

比如我们定义以下HTML和CSS代码：

<div id="container">
  <div class="content">
    <p>展开内容</p>
    <p>展开内容</p>
    <p>展开内容</p>
  </div>
  <div class="switch-btn">
    <a href="#">展开</a>
  </div>
</div>

<style>
  #container {
    width: 300px;
    height: 50px;
    overflow: hidden;
    border: 1px solid #ccc;
    position: relative;
    margin: 20px auto;
  }

  .content {
    height: 0;
    position: absolute;
    transition: height 0.5s ease-in-out;
    width: 100%;
    bottom: 0;
    left: 0;
    background: white;
  }

  .switch-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #337ab7;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
  }

  .switch-btn a {
    text-decoration: none;
    color: #fff;
  }

  .opened {
    height: 100%;
  }
</style>

2.Javascript 代码编写

接着就需要使用 JavaScript，实现切换效果的逻辑。我们需要监听按钮的点击事件，当点击按钮时，改变容器的高度来实现展开或收起内容的效果。

var container = document.getElementById('container');
var switchBtn = document.querySelector('.switch-btn');

switchBtn.addEventListener('click', function(e) {
  e.preventDefault();
  var content = container.querySelector('.content');
  if (container.className.indexOf('opened') !== -1) {
    container.className = '';
    content.style.height = '0';
  } else {
    container.className = 'opened';
    content.style.height = content.scrollHeight + 'px';
  }
});

这段代码首先获取了容器和按钮元素，然后添加了点击事件监听器。当点击按钮时，首先获取内容容器；然后通过判断容器的 classname 是否含有 opened 来判断容器的当前状态，如果已经打开就收起，如果已经关闭就展开。

同时，通过修改容器和内容元素的 className 和高度属性，来改变容器的状态和展现内容。

示例说明

在这个示例中，我们通过 CSS 定义了容器和内容的基本样式和动画效果，然后通过 JavaScript 监听按钮的点击事件，动态改变容器和内容的 className 和高度属性，来改变容器的状态和展现内容。

在使用这个动画效果时，第一步鼓励大家以HTML 和 CSS代码为基础，先建立标准页面布局。注意在HTML和CSS中，对于容器的大小、可滚动性等一定要有准确的把握，才能够更好地进行后续的 JavaScript 动画代码开发。