我可以顯示/隱藏div的一部分嗎？

我正在創建包含網站表格的側邊欄。我可以顯示/隱藏div的一部分嗎？

我想：

只有五排通過點擊側邊欄15行會顯示與鏈接文本將改變底部的鏈接在第一
顯現。
當div完全打開時，通過再次單擊鏈接，邊欄只會再次顯示前五個並且鏈接文本會再次變回第一個。

所以我正在尋找某種切換div功能來爲我做這個，但我希望div的一部分始終可見。

這裏是我的側邊欄的截圖：http://cl.ly/image/390J2u2z1W1Z

是否有任何人誰擁有很好的解決了我的問題？

來源

2012-11-26 DrMtotheac

@Caribou嗯，我們是非常有幫助反正...見下文...... – jtheman

@jtheman洛爾 - 我應該有看起來我需要一個休息我想:) – Caribou

將您的主<div>分爲多個，更小的<div> s ...然後只是隱藏您的內部整體<div> s。用jQuery的.toggle或.hide/.show函數。

來源

2012-11-26 14:13:04 Darrrrrren

這一切都取決於你的內容是什麼，但最簡單的方法是改變div高度以符合你的要求或使用兩個div（一個用於「縮短」版本，另一個用於「完整」並相應地顯示/隱藏它們。

來源

2012-11-26 14:13:15

添加一個類你不要行要顯示第一

<tr class="toggle"> ..... </tr>

CSS：

tr.toggle { display: none; }

Sideba [R鏈接：

<a href="#" id="toggle">Toggle</a>

然後使用jQuery切換（）來開啓和關閉

<script> 
    $(function(){ 
    $('a#toggle').click(function(e) 
    { 
     e.preventDefault(); 
     $('tr.toggle').toggle(); 
    }); 

    }); 
</script>

來源

2012-11-26 14:15:02 jtheman

對不起，但更改爲slideToggle（）沒有任何區別，它仍然是相同的。任何線索爲什麼？這裏是演示：http://jsfiddle.net/matmuchrapna/ZAtX8/5/ – DrMtotheac

啊。這是由於錶行不具有默認高度。請參閱http://stackoverflow.com/questions/5126704/slidetoggle-in-table-row因此，如果您將表格改爲DIV，最簡單。 – jtheman

只要檢查該demo

JS：

$('.js_toggle').on('click', function(event) { 
    $('table').toggleClass('full-table'); 

    event.preventDefault(); 
});

HTML：

<table> 
    <tr> 
     <td>tr01</td> 
     <td>tr02</td> 
    </tr> 
    … 
    <tr> 
     <td>tr01</td> 
     <td>tr02</td> 
    </tr> 
</table> 

<a href="#" class="js_toggle">toggle_table</a>

CSS：

table tr:nth-child(n+6) { 
    display: none; 
} 

table.full-table tr { 
    display: block; 
}

來源

2012-11-26 14:26:03

這比我的解決方案還要好！ – jtheman

我認爲tr的默認顯示模式是display：table-row？（不封鎖） – jtheman

謝謝！有沒有辦法讓隱藏的內容在切換時滑下來？我也在尋找一種方法來改變點擊鏈接文字，你知道我能做到嗎？下面是我的側邊欄的截圖：http://cl.ly/image/390J2u2z1W1Z 再次感謝！ – DrMtotheac

我可以顯示/隱藏div的一部分嗎？

回答

相關問題