jquery - 切换时使菜单功能区随着菜单上下滑动

Question

我有一个隐藏菜单，当单击功能区时该菜单会向下滑动，但功能区本身仍保持在原位。我希望这样功能区会随着菜单的其余部分一起向下滑动，同样在关闭菜单时功能区也会向上滑动。

html代码

<div id="topbar">
    <div id="tophiddenbar" style="display: none;">
      <p>stuff goes here</p>
    </div>
    <div id="menu" class="ribbon">
      <p>Menu</p>
    </div>
</div>

CSS代码

#topbar {
  background: #0174C3;
  color: #fff;
  padding: 0 0 15px 0;
  font-size: 62.5%; 
  text-align: center;
  height: 10px;
  overflow: hidden;
  -webkit-transition: height 0.5s linear;
  -moz-transition: height 0.5s linear;
  transition: height 0.5s linear;
}

#topbar.active {
    height: 250px;
}

.ribbon {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 50px;
  height: 20px;
  background-color: #444;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

J查询代码

$("#menu").click(function(){
    $("#topbar").toggleClass('active');
  $("#tophiddenbar").toggle();
});

Codepen 样本 https://codepen.io/anon/pen/wZEKBz

加载页面时的当前默认行为

单击功能区时的当前行为

单击功能区时的预期行为

Answer 1

使用另一个 div 和 position:relative 它会工作检查这个答案

<div class="ribbon-parent">
  <div id="menu" class="ribbon">
      <p>Menu</p>
  </div>
  </div> 

$("#menu").click(function(){
	$("#topbar").toggleClass('active');
  $("#tophiddenbar").toggle();
});

#topbar {
  background: #0174C3;
  color: #fff;
  padding: 0 0 15px 0;
  font-size: 62.5%; 
  text-align: center;
  height: 10px;
  overflow: hidden;
  -webkit-transition: height 0.5s linear;
  -moz-transition: height 0.5s linear;
  transition: height 0.5s linear;
}

#topbar.active {
	height: 250px;
}
.ribbon-parent{
  position:relative;
}
.ribbon {
  position: absolute;
  color: #fff;  
  top: 0;
  left: 50%;
  width: 50px;
  height: 25px;
  background-color: #444;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
p{
font-size: 62.5%; 
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topbar">
	<div id="tophiddenbar" style="display: none;">
			<p>stuff goes here</p>
	</div>  
</div>
<div class="ribbon-parent">
  <div id="menu" class="ribbon">
      <p>Menu</p>
  </div>
  </div>

检查更新的 codepen here