javascript - 如何在可以最小化的网站导航栏顶部创建报价条？

Question

我在导航栏上方显示的网站上看到了此优惠。

点击右上角的箭头后是这样的。

我怎样才能让它响应？

任何人都可以分享如何实现这样的解决方案吗？是否有我可以重复使用的现有解决方案？

Answer 1

自己做一个很简单。
主要步骤是:

1. 创建一个 div 元素，固定在顶部，高度为零
2. 在右上角放一个按钮
3. 给按钮绑定(bind)一个事件，当点击时，切换div的高度。

这是一个例子:http://codepen.io/SLRXXX/pen/YWVdJZ

$('.button').on('click', function () {
  $('.top').toggleClass('active');
});

.top {
  position: fixed;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
}
.strip {
  height: 0;
  background-color: yellow;
  transition: height 0.5s;
  line-height: 40px;
  text-align: center;
  overflow: hidden;
}
.top.active .strip{
  height: 40px;
}
.button {
  position: absolute;
  top: 0;
  right: 5px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  background-color: yellow;
  color: #fff;
  cursor: pointer;
}
.arrow-down {
  transition: transform 0.5s;
}
.top.active .arrow-down{
  transform: rotate(180deg)
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="top">
  <div class="strip">
    some content
  </div>
  <div class="button">
    <i class="glyphicon glyphicon-chevron-down arrow-down"></i>
  </div>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>