实现效果:一开始折叠所有Group,当点击展开当前Group时,其它Group自动收缩
方法: 编写它的两个客户端事件即可
function ASPxNavBar_Init(s, e) {
s.CollapseAll();
}
s.CollapseAll();
}
function ASPxNavBar_ExpandedChanged(s, e) {
if (e.group.GetExpanded() == true) {
for (var i = 0; i < s.GetGroupCount(); i++) {
if (i == e.group.index) continue;
s.GetGroup(i).SetExpanded(false);
}
}
}
if (e.group.GetExpanded() == true) {
for (var i = 0; i < s.GetGroupCount(); i++) {
if (i == e.group.index) continue;
s.GetGroup(i).SetExpanded(false);
}
}
}
=================================================================
jquery实现的类似效果
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
JQuery 展开合拢层
$(function()
{
http://www.w3.org/1999/xhtml">
JQuery 展开合拢层
$(function()
{
$("#mostrar").click(function(event) {
event.preventDefault();
$("#caja").slideToggle();
});
event.preventDefault();
$("#caja").slideToggle();
});
$("#caja a").click(function(event) {
event.preventDefault();
$("#caja").slideUp();
});
});
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
a{color:#993300; text-decoration:none;}
#caja {
width:70%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
点击展开详细……(若效果失效 ,请刷新本页面,载入jquery后就正常了!)
event.preventDefault();
$("#caja").slideUp();
});
});
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
a{color:#993300; text-decoration:none;}
#caja {
width:70%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
点击展开详细……(若效果失效 ,请刷新本页面,载入jquery后就正常了!)
[x]关闭
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/23109131/viewspace-666778/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/23109131/viewspace-666778/