html+css3+jquery点击展开平滑下拉特效UI

1、新建html文档。

3、初始化css代码。<style>*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }html, body { font-size: 62.5%; }body { background: #F2E274; font-family: "Open Sans", Helvetica, Arial, sans-serif; }</style>

5、书写并添加js代码。<script src='js/stopExecutionOnTimeout.js?t=1'></script><script src="js/jquery-2.1.1.min.js"></script><script>$(document).ready(function () { var $demo = $('.demo'); var menuTextAT = 500; $(document).on('click', '.demo__menu-btn', function () { $demo.addClass('menu-active'); }); $(document).on('click', '.demo__menu-item', function () { var $item = $(this); var targetSection = $item.data('section'); $item.addClass('clicked'); $demo.removeClass('menu-active'); $('.demo__section.active-section').removeClass('active-section'); $('.demo__section--' + targetSection).addClass('active-section'); setTimeout(function () { $item.removeClass('clicked'); }, menuTextAT); });});</script>