在基於div的表格中展開一行

我有一堆顯示名稱的元素<div>。我希望在每個<div>的旁邊包含一個+鏈接，點擊後可擴展<div>並添加更多詳細信息（來自RoR控制器）。在基於div的表格中展開一行

在網上搜索後，我發現link_to_remote和相關的RoR的東西，但我似乎無法找到合適的組合。有人能指點我一個教程或顯示控制器和視圖交互應該是什麼樣子？

謝謝！

2010-06-16 magneticMonster

爲什麼不走不顯眼的方式？ jQuery的？ – 2010-06-16 16:31:12

我很樂意。你能解釋一下嗎？ – magneticMonster 2010-06-16 16:49:54

您可以在下面的例子中使用JavaScript做到這一點真的很容易：

<html> 
<head> 
<title>Text Page</title> 
<script language="Javascript"> 
    function toggleDiv(divid) { 
    if (document.getElementById(divid).style.visibility == 'hidden') { 
     document.getElementById(divid).style.visibility = 'visible'; 
    } 
    else { 
     document.getElementById(divid).style.visibility = 'hidden'; 
    } 
    } 
</script> 
</head> 
<body> 
    <span onClick="toggleDiv('div1');" style="cursor:pointer;">+</span> 
    <div id="div1" style="visibility:hidden;">This is DIV 1</div> 
    <span onClick="toggleDiv('div2');" style="cursor:pointer;">+</span> 
    <div id="div2" style="visibility:hidden;">This is DIV 2</div> 
</body> 
</html>

如果設置DIV的的隱藏的初始可見性，你可以使用上面來切換顯示的toggleDiv功能給定ID的任何DIV的可見性。您可能需要調整DIV的樣式定義以在加號旁邊顯示（例如，將它們放在鄰近的<TD>'s中），但我想我會保持簡單。

祝你好運。

來源

2010-06-16 18:32:17

在基於div的表格中展開一行

回答

相關問題