如何在网页中实现类似.net 中代码段 #region ....endregion 收缩的功能?

Question

如何在网页中实现类似.net 中代码段 #region ....endregion 收缩的功能?

Answer 1

DNN 里的源码 实现如下功能.我javascript不是很熟.调用出错,缺少对象.function __dnn_ContainerMaxMin_OnClick(oLnk, sContentID)
{
var oContent = dnn.dom.getById(sContentID);
if (oContent != null)
{
var oBtn = oLnk.childNodes[0];
var sContainerID = oLnk.getAttribute('containerid');
var sCookieID = oLnk.getAttribute('cookieid');
var sCurrentFile = oBtn.src.toLowerCase().substr(oBtn.src.lastIndexOf('/'));
var sMaxFile;
var sMaxIcon;
var sMinIcon; if (dnn.getVar('min_icon_' + sContainerID))
sMinIcon = dnn.getVar('min_icon_' + sContainerID);
else
sMinIcon = dnn.getVar('min_icon'); if (dnn.getVar('max_icon_' + sContainerID))
sMaxIcon = dnn.getVar('max_icon_' + sContainerID);
else
sMaxIcon = dnn.getVar('max_icon'); sMaxFile = sMaxIcon.toLowerCase().substr(sMaxIcon.lastIndexOf('/')); var iNum = 5;
if (oLnk.getAttribute('animf') != null)
iNum = new Number(oLnk.getAttribute('animf'));

if (sCurrentFile == sMaxFile)
{
oBtn.src = sMinIcon;
//oContent.style.display = '';
dnn.dom.expandElement(oContent, iNum);
oBtn.title = dnn.getVar('min_text');
if (sCookieID != null)
{
if (dnn.getVar('__dnn_' + sContainerID + ':defminimized') == 'true')
dnn.dom.setCookie(sCookieID, 'true', 365);
else
dnn.dom.deleteCookie(sCookieID);
}
else
dnn.setVar('__dnn_' + sContainerID + '_Visible', 'true');
}
else
{
oBtn.src = sMaxIcon;
//oContent.style.display = 'none';
dnn.dom.collapseElement(oContent, iNum);
oBtn.title = dnn.getVar('max_text');
if (sCookieID != null)
{
if (dnn.getVar('__dnn_' + sContainerID + ':defminimized') == 'true')
dnn.dom.deleteCookie(sCookieID);
else
dnn.dom.setCookie(sCookieID, 'false', 365);
}
else
dnn.setVar('__dnn_' + sContainerID + '_Visible', 'false');
}

return true; //cancel postback
}
return false; //failed so do postback
}

Answer 2

用一个span包含你需要伸缩的代码块儿  用js动态的控制span的id 是否伸缩

Answer 3

function go(tablelink,tabledetail) {
if(tablelink.innerHTML == "[显示明细]") {
tabledetail.style.display = "";
tablelink.innerHTML = "[隐藏明细]";
}
else {
tabledetail.style.display = "none";
tablelink.innerHTML = "[显示明细]";
}
}调用示例
<td class="tdlink" id="installlink" style="CURSOR: hand" onclick="javascript:go(this,document.all.install);" align="center" width="156" height="24">[显示明细]</td>其中install为要伸缩的区域，如span,div,td,table……都可以，只要设定id就可