jquery - 在 jQuery 切换它之后，将 div 放置在特定的动态 Rails 元素旁边

Question

在我的 Rails 应用程序中(我应该注意到，它使用的是 Bootstrap 的网格系统)，我在左栏中显示了一篇博文。在右栏中，我使用 jQuery 切换效果打开一个快速表单(例如用户可以发表评论的地方)。

为了激活此表单，我使用我的 jQuery 在单击段落标记时切换它，现在可以正常工作了。但是，ID 为 #exampleToggle 的表单将发布到列的最顶部。

问题:如果我想让 form/exampleToggle 不仅切换到被单击的段落标记，而且切换到 next 怎么办？

<div class="col-md-8">
    <% @posts.each do |post| %>
            <h2 id="title"><%= post.title %></h2>
            <p id="category"><%= post.category %></p>
            <div id="text"><%= markdown(post.content) %></div>    
    <% end %>
</div> 

<div class="col-md-4">
<div class="exampleToggle">
    <%= form_for :cements do |f| %>
        <div class="form-group">
        <div class="field">
        <%= f.label :username %><br>
        <%= f.text_field :username, class: "form-control" %>
            </div>
            </div>

        <div class="form-group">
        <div class="field">
        <%= f.label :post %><br>
        <%= f.text_area :post, class: "form-control" %>
      </div>
      </div>

<div class="actions">
    <%= f.submit "Save", class: "btn btn-success-outline" %>
</div>
<% end %>
</div>

<script>

    $(document).ready(function(){
        $( ".exampleToggle" ).hide();

        $("p").click(function(){
            $(".exampleToggle").toggle();
            });
    });

</script>

当然，如果我的页面是静态的，这会相当容易。假设我有三个段落标签:我可以使用网格系统创建“行”，并在单击正确的 id 选择器时在该行中发布表单。

由于这是动态内容，因此 Rails 循环中可能有任意数量的段落，该解决方案无效。

此外，如果有更智能的方法，我完全可以不使用 Bootstrap 网格。我现在的推理是，我在右侧创建了一个用于放置表单的列空间——我只需要找到一些方法来在单击时将 exampleToggle 有效地放置在关联的段落标记旁边.

这可能吗？

Answer 1

显然，这在很大程度上取决于您计划如何填充这些弹出框，但下面是一个示例，说明如何使用 jQuery 进行追加，并通过 CSS 根据单击的元素定位。

$(document).ready(function(){
  $("p").click(function(){
    $(this).append("<div class='pop-out'>populate this dynamically</div>");
  });
});

然后:

p {
  position: relative;
}

.pop-out {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 100px;
}

如果您可以创建一个示例 JSFiddle，我可以从那里帮助解决任何问题。