如何使用 jquery 脚本使向上滑动默认打开？

Question

我在 Whosebug 上找到了这个脚本，对我很有帮助。我试图让它默认打开（默认向上滑动），而不消除向下滑动。但是我没有成功。谁能帮我改正？非常感谢。

$(document).ready(function() {
  $('.foot').click(function() {
    if ($('.foot').hasClass('slide-up')) {
      $('.foot').addClass('slide-down', 1000, 'easeOutBounce');
      $('.foot').removeClass('slide-up');
    } else {
      $('.foot').removeClass('slide-down');
      $('.foot').addClass('slide-up', 1000, 'easeOutBounce');
    }
  });
});

.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;
}

<div class="foot">
  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>

Answer 1

您可以像这样简单地将 class slide-up 添加到 <div class="foot">：

<div class="foot slide-up">

或者您也可以在页面加载时使用 jQuery:

$('.foot').addClass('slide-up');

代码如下：

$(document).ready(function() {
  $('.foot').click(function() {
      if($('.foot').hasClass('slide-up')) {
        $('.foot').addClass('slide-down', 1000, 'easeOutBounce');
        $('.foot').removeClass('slide-up'); 
      } else {
        $('.foot').removeClass('slide-down');
        $('.foot').addClass('slide-up', 1000, 'easeOutBounce'); 
      }
  });
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

如何使用 jquery 脚本使向上滑动默认打开？

how to make slide up default open with jquery script?

javascript

jquery

css

slidedown

slideup