如何用jQuery脚本实现slide-up默认展开效果？

很容易搞定！你只需要做两个小调整就能实现默认展开，同时保留点击收起/展开的功能：

1. 修改HTML，初始添加展开类 #

给.foot元素加上slide-up类，这样页面加载时它就处于展开状态了：

<div class="foot slide-up"> 
  Copyright 2014 &copy; Tom Gibbs web design. 
  <div class="clocker">hi</div> 
  <br /> <br /> 
  Line 1<br /> 
  Line 2<br /> 
  Line 3<br /> 
  Line 4 
</div>

2. 优化JS代码（更简洁高效） #

原来的逻辑是对的，但可以用$(this)代替重复的$('.foot')，避免多次查询DOM，让代码更简洁：

$(document).ready(function() {
  $('.foot').click(function() {
    const $foot = $(this); // 缓存当前元素，提升性能
    if ($foot.hasClass('slide-up')) {
      $foot.addClass('slide-down', 1000, 'easeOutBounce').removeClass('slide-up');
    } else {
      $foot.removeClass('slide-down').addClass('slide-up', 1000, 'easeOutBounce');
    }
  });
});

3. CSS保持不变 #

原来的CSS样式已经正确定义了展开和收起的位置，不需要修改：

.foot { 
  border-top: 1px solid #999999; 
  position: fixed; 
  width: 600px; 
  z-index: 10000; 
  text-align: center; 
  height: 300px; 
  font-size: 18px; 
  color: #000; 
  background: #FFF; 
  display: flex; 
  justify-content: center; /* align horizontal */ 
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px; 
  right: 0; 
  left: 0; 
  margin-right: auto; 
  margin-left: auto; 
  bottom: -275px; 
} 
.slide-up { bottom: 0 !important; } 
.slide-down { bottom: -275px !important; }

这样修改后，页面加载时底部栏会默认展开，点击它就会平滑收起，再次点击又会展开，完全符合你的需求～

内容的提问来源于stack exchange，提问作者Abdullah