为移动网站打开各自div的前端邮袋

Question

我有一个移动网站的设计，它有90%宽圆形盒子垂直堆叠。每个圆角框的高度从480 of到800 of不等，因为它的动态content..it显示一个弹出窗口，当clicked...popup窗口高度类似地从480 of变化到800px..and时，弹出窗口应该出现在相应圆角框的正下方。为此，我为每个弹出窗口提供了单独的it，并将其定位为绝对。问题是，移动站点有大约38个圆形框和弹出窗口.我必须创建38个is并为每个弹出窗口应用css定位。是否有更好的方法来实现这一点？

看看这里的小提琴，http://jsfiddle.net/4eLfq4u7/

<div class="rounded_box" id="one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ducimus tempora deserunt repellat architecto adipisci. Nulla est voluptatem, expedita possimus veniam tempora voluptate inventore eius
    </p>

Answer 1

更改html以生成如下内容：

<div class="wrapper">
  <div class="roundedBox"></div>
  <div class="popup"></div>
</div>

这样你的js就可以这样工作了：

$(".wrapper").click(".roundedBox", function () {
     $(".popup", this).toggle();
});

根据你的css，因为定位绝对也是相对的-它的父，你不需要定位每一个弹出式通过id。

见工作小提琴：http://jsfiddle.net/4eLfq4u7/1/