如何在这个.aspx页面上实现可折叠部分?

时间:2010-04-25 15:48:18

标签: c# asp.net javascript visual-studio

这个.aspx页面有一组很好的可折叠部分,只有很少的“+ - ”控件。

http://www.microsoft.com/sqlserver/2008/en/us/editions-compare.aspx

有谁能告诉我在Visual Studio中如何做到这一点?

我尝试使用firebug来解构页面,但找不到正在执行showCollapsibleItem()调用的脚本。

谢谢!

3 个答案:

答案 0 :(得分:1)

尝试AJAX Control Toolkit's CollapsiblePanel

您也可以使用jQuery轻松完成此任务:

$('a.toggler').click(function() { $(this.rel).toggle(); return false; });

<a href="#" rel="#section1">Section 1</a> 
<p id="section1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

答案 1 :(得分:1)

一种便宜的方法是使用jquery的.hide()和.show()事件。这是一个名为Simple Jquery Show/Hide Div的教程,展示了如何实现这一目标。 Here is a demostration教程将做什么。

希望这会有所帮助。

答案 2 :(得分:0)

如果您不想使用jQuery,可以在示例页面中使用showCollapsibleItem函数

function showCollapsibleItem(id) {if(document.getElementById(id+"ExpandIcon").className=='cueCollapsibleContentExpandIcon') {document.getElementById(id).style.display='block';document.getElementById(id+"ExpandIcon").className='cueCollapsibleContentCollapseIcon';} else {document.getElementById(id).style.display='none';document.getElementById(id+"ExpandIcon").className='cueCollapsibleContentExpandIcon';}}

http://www.microsoft.com/sqlserver/shared/core/2/js/js.ashx?pt=Column3Zone3&c=cueCollapsibleContent