將jQuery的切換它

在我的Rails應用程序（即，我要指出，採用引導的網格系統）後，旁邊的一個特定的，動態的Rails元素一個div，我有一個左邊欄顯示的博客文章。在右欄中，我使用了jQuery切換效果來打開一個快速表單（就像用戶可以留下評論的地方一樣）。將jQuery的切換它

要激活這種形式，我用我的jQuery來切換它被點擊一個段落標記時，和現在工作。但是，表單編號爲#exampleToggle的表單將發佈到列的最上方。

問：如果我想有形式/ exampleToggle不僅在切換，但下一個切換到被點擊的段落標記？

<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的循環paragaphs的，該解決方案沒有奏效。

此外，我完全沒有不使用引導電網是否有這樣做的明智之選。我現在的推理是我在右側爲要放置的表單創建一個列空間 - 我只需要找到某種方法在點擊時有效地將exampleToggle放置在關聯的段落標記旁邊。

這可能嗎？

來源

2016-07-23 darkginger

顯然，這在很大程度上取決於你打算如何填充這些彈出框，但以下是基於通過CSS點擊的元素如何使用jQuery追加一個例子，和位置。

$(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，我可以從那裏的任何問題提供幫助。

來源

2016-07-23 00:26:10 Toby

這看起來很棒，並且與靜態內容（如彈出式div）一起更新時效果很好。比方說，我在.append方法中放置了表單（即在body標籤中，並且類名稱爲.pop-out） - 我注意到它似乎沒有工作。你可以在腳本外追加一個元素或div嗎？作爲參考，我的意思是像這樣重寫：'$（this）.append（「。pop-out」）;' – darkginger

彈出的內容將是動態的，我假設 - 如果將其包含在Rails應用程序中並輸出如果段落需要，可以使用類「.pop-out」的div，然後你可以用CSS隱藏div並使用jQuery顯示它。 – Toby

是的，你可以從這個腳本的外部追加，但它很大程度上取決於你打算如何填充這些框。在其他地方存儲HTML可能更合適，然後只需在需要時使用jQuery激活和定位 - 可以沿着模態窗口的行思考。 – Toby

將jQuery的切換它

回答

相關問題