|
搞项目的时候需要用到菜单的缩放效果如图：
这里还有点问题需要解决如果全部刷新的时候，他会全部关闭，没有记录相应打开的子节点。因为我们项目需要全部刷新，所以还需要改进。
代码如下： <style type="text/css">
body {
margin: 30px auto;
}
ul {
list-style: none;
}
#faq {
font-size: 12px;
width: 200px;
}
#faq li {
margin: 0 0 0px;
padding: 0 0 0px;
}
#faq dl {
margin: 0;
padding:0;
display:inline;
}
#faq dt {
font-weight:bold;
cursor:pointer;
line-height: 20px;
padding: 0 0 5px 22px;
height: 30px;
line-height: 30px;
text-indent: 40px;
background: url("<%= rootPath %>/images/back/left_title.jpg") no-repeat scroll 0 0 transparent;
}
#faq dd {
display:none;
margin:0;
padding: 1px 1px 1px 2px;
background:#E5ECF9;
line-height: 180%;
width: 96%;
text-indent: 30px;
}
</style>
<script type="text/javascript">
var lastFaqClick=null;
window.onload=function(){
//
var faq=document.getElementById("faq");
var dls=faq.getElementsByTagName("dl");
for (var i=0,dl;dl=dls[i];i++){
var dt=dl.getElementsByTagName("dt")[0];//取得标题d
dt.id = "faq_dt_"+(Math.random()*100);
dt.onclick=function(){
var p=this.parentNode;//取得父节点
if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
for (var i=0,dd;dd=dds[i];i++)
dd.style.display='none';
}
lastFaqClick=this;
var dds=p.getElementsByTagName("dd");//取得对应子节点，也就是说明部分
var tmpDisplay='none';
if (gs(dds[0],'display')=='none')
tmpDisplay='block';
for (var i=0;i<dds.length;i++)
dds[i].style.display=tmpDisplay;
}
}
}
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a];
//alert(d.currentStyle);
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a];
// alert(curVal);
}
return curVal;
}
</script>
<div>
<ul id="faq">
<li>
<dl>
<dt>首页</dt>
<dd><a href="index.action">我的首页</a></dd>
<dd><a href="editPhoneInfo.action">网机设置</a></dd>
</dl>
</li>
<li>
<dl>
<dt>网机设置</dt>
<dd><a href="editPhonePerson.action">个人信息</a></dd>
<dd><a href="editPhoneInfo.action">网机信息</a></dd>
<dd><a href="editPhoneCompany.action">公司信息</a></dd>
</dl>
</li>
<li>
<dl>
<dt>公司管理</dt>
<%
if((phone.getPhone_grade().equals(Constants.WEB_ADMIN_NUM) &&
!phone.getVerify_status().equals(Constants.PHONE_VERIFY_STATUS_NOVERIFY)) || //根网机必须认证成功之后才能看到该功能
(phone.getPhone_grade().length() == 4 && phone.getToplimit_phone_num()>0)){//如果是二级网机，必须课增加的数量大于0才能看到
%>
<dd><a href="subPhoneList.action">子网机管理</a></dd>
<%
}
%>
</dl>
</li>
</ul>
</div>
</div>
总结： 1、 list-style 简写属性在一个声明中设置所有的列表属性 该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素， 所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素， 并由 list-item 元素继承。 2、margin 边界
3、padding 填充 内边界
4、Object.style.display=value
值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact 此元素会根据上下文作为块级元素或内联元素显示。 marker table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 table-row 此元素会作为一个表格行显示（类似 <tr>）。 table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 table-column 此元素会作为一个单元格列显示（类似 <col>） table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） table-caption 此元素会作为一个表格标题显示（类似 <caption>）
5、currentStyle currentStyle 对象返回了元素上的样式表，但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此，通过 currentstyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如，如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red )，而不是内嵌的话，对象.currentstyle.color 将返回正确的颜色，而对象 style.color 不能返回值。但是，如果用户指定了 <p style="color:'red'">，currentstyle 和 style 对象都将返回值 red。
currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为：
内嵌样式 样式表规则 HTML 标签属性 HTML 标签的内部定义
|
