div+css 菜单缩放

猫性男孩

搞项目的时候需要用到菜单的缩放效果如图：

这里还有点问题需要解决如果全部刷新的时候，他会全部关闭，没有记录相应打开的子节点。因为我们项目需要全部刷新，所以还需要改进。

代码如下：

[code=Xml width=600px]<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++){
    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++)
            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.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>[/code]

总结：

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 标签的内部定义

赵人无名

我输代码就没有你这种效果
哎

猫性男孩

<%
106                    if((phone.getPhone_grade().equals(Constants.WEB_ADMIN_NUM) &&
107                            !phone.getVerify_status().equals(Constants.PHONE_VERIFY_STATUS_NOVERIFY)) || //根网机必须认证成功之后才能看到该功能
108                    (phone.getPhone_grade().length() == 4  && phone.getToplimit_phone_num()>0)){//如果是二级网机，必须课增加的数量大于0才能看到
109                     %>
110                       <dd><a href="subPhoneList.action">子网机管理</a></dd>
111                     <%
112                     }
113                     %>

把这段代码删了就行了

猫性男孩

赵人无名 发表于 2013-4-9 22:31
我输代码就没有你这种效果
哎

看我下面的回复