Jquery 包含在其下方滑动的内容的框

我正在创建一个网格，其中有单独的框。单击这些框，我将显示一个

div

，其中包含与该框相关的数据。我正在使用

jquery

的

slideToggle

显示

div

整个设置很好，我很满意。第一行

包含框，单击每个框，内容如下所示：



//代码在这里
$（文档）.ready（函数（）{
$（'.info内容框'）.hide（）；
var=''；
$（'.info box.info header'）。单击（函数（e）{
var id='#'+$（this.data（'name'）；
如果（openedId==''）{
$（id）.slideToggle（400，函数（）{
openedId=id；
});
}否则{
if（openedId==id）{
$（openedId）.slideToggle（400，null）；
}否则{
$（openedId）.隐藏（10）；
$（id）.fadeToggle（400，函数（）{
openedId=id；
});
}
}
})
})
/*样式在这里*/
.信息框{
文本对齐：居中；
高度：200px；
颜色：白色；
}
.信息框.信息标题{
背景色：#3178b9；
身高：90%；
边框：1px实心#f5f0e7；
显示器：flex；
证明内容：中心；
对齐项目：居中；
-webkit过渡：所有150毫秒的缓变；
-moz转换：所有150毫秒的时间都会变慢；
-o型过渡：所有150毫秒的缓变；
过渡：所有150毫秒都放松；
}
.信息框.信息标题：悬停{
背景色：#b4a28f；
边框：5px实心#f5f0e7；
-webkit过渡：所有150ms的易用性；
-moz转换：所有150ms的易用性；
-o型过渡：所有150毫秒的缓进；
过渡：所有150毫秒的缓进；
}
.信息框.信息标题.信息行{
浮动：左；
背景色：白色；
高度：2倍；
宽度：0%；
-webkit过渡：所有150毫秒的缓变；
-moz转换：所有150毫秒的时间都会变慢；
-o型过渡：所有150毫秒的缓变；
过渡：所有150毫秒都放松；
}
.信息框.信息标题：悬停.信息行{
浮动：左；
背景色：白色；
高度：2倍；
宽度：30%；
-webkit过渡：所有150ms的易用性；
-moz转换：所有150ms的易用性；
-o型过渡：所有150毫秒的缓进；
过渡：所有150毫秒的缓进；
}
.信息内容框{
填充底部：30px；
宽度：100%；
}

你好

你好

你好

你好

标题
Lorem ipsum dolor sit amet，奉献精英。连续性蓄积剂的作坊，由发明者以溶液的形式为生命之源的蓄积剂作坊，假定为静坐之所

标题
Lorem ipsum dolor sit amet，奉献精英。连续性蓄积剂的作坊，由发明者以溶液的形式为生命之源的蓄积剂作坊，假定为静坐之所

标题
Lorem ipsum dolor sit amet，奉献精英。连续性蓄积剂的作坊，由发明者以溶液的形式为生命之源的蓄积剂作坊，假定为静坐之所

标题
Lorem ipsum dolor sit amet，奉献精英。连续性蓄积剂的作坊，由发明者以溶液的形式为生命之源的蓄积剂作坊，假定为静坐之所

在您的点击功能中，您只需点击
.info内容框
，然后点击`.info框

//代码在这里
$（文档）.ready（函数（）{
$（'.info内容框'）.hide（）；
var=''；
$（'.info box.info header'）。单击（函数（e）{
var id='#'+$（this.data（'name'）；
如果（openedId==''）{
$（id）.insertAfter（$（this.parent（））；
$（id）.slideToggle（400，函数（）{
openedId=id；
});
}否则{
if（openedId==id）{
$（id）.insertAfter（$（this.parent（））；
$（openedId）.slideToggle（400，null）；
}否则{
$（openedId）.隐藏（10）；
$（id）.fadeToggle（400，函数（）{
openedId=id；
});
}
}
})
})

/*样式在这里*/
.信息框{
文本对齐：居中；
高度：200px；
颜色：白色；
}
.信息框.信息标题{
背景色：#3178b9；
身高：90%；
边框：1px实心#f5f0e7；
显示器：flex；
证明内容：中心；
对齐项目：居中；
-webkit过渡：所有150毫秒的缓变；
-moz转换：所有150毫秒的时间都会变慢；
-o型过渡：所有150毫秒的缓变；
过渡：所有150毫秒都放松；
}
.信息框.信息标题：悬停{
背景色：#b4a28f；
边框：5px实心#f5f0e7；
-webkit过渡：所有150ms的易用性；
-moz转换：所有150ms的易用性；
-o型过渡：所有150毫秒的缓进；
过渡：所有150毫秒的缓进；
}
.信息框.信息标题.信息行{
浮动：左；
背景色：白色；
黑格
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='showBox'>
<img class='show'>
<img class='show'>
<img class='show'>
<img class='show'>
</div>

    body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.foo {
  width: 200px;
  height: 200px;
  background-color: black;
  display: inline-block;
  margin: 20px auto;
}

.foo:hover {
  background-color: green;
  cursor: pointer;
}

.show {
/*haha ironic*/
  display: none;
  background-color: blue;
}

.showBox {
  display:none;
  width:100%;
  height: 200px;
  background-color: red;
}

$(function(){
  $('.foo').on('click', function(){
    $('.showBox').animate({
      height: "toggle"
    }, 1500);
  });
});