解决 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');
        }
    })
})

 

posted @ 2021-01-08 10:34  小蘑菇123  阅读(349)  评论(0编辑  收藏  举报