解决 js/jq 的 slideDown 和 slideUp 初始状态
如下:
html:
<div class="order_detail_btn shows">
<span>收起订单详情</span>
</div> <div class="order_detail_msg">
............
</div>
css:
.order_detail_msg {
display: none;
}
js:
$(document).ready(function(){ $(document).on('click', '.order_detail_btn' ,function() { if($(this).is('.shows')) { $('.order_detail_msg').slideUp(); $(this).removeClass('shows'); } else { $('.order_detail_msg').slideDown(); $(this).addClass('shows'); } }) })
使用 display 设置初始状态,slideUp 滑动效果无法展示,需修改为:
$(document).ready(function(){ $(document).on('click', '.order_detail_btn' ,function() { if($(this).is('.shows')) { $('.order_detail_msg').animate({ height: 'show' }, 'slow'); $(this).removeClass('shows'); } else { $('.order_detail_msg').animate({ height: 'hide' }, 'slow'); $(this).addClass('shows'); } }) })