谁来帮我看下这个JS代码

Question

本帖最后由 liangtianheng 于 2012-12-07 11:51:35 编辑

Answer 1

这类的刚做不久，用Dtree.js吧，还比较好用。

Answer 2

<style>
/*左侧菜单样式*/
 
*{margin:0;padding:0;list-style-type:none;} 
a,img{border:0;} 
a{color:#5e5e5e;font-size:14px;text-decoration:none;} 
a:hover{color:#3366cc;text-decoration:underline;} 
.nav_menu{width:180px;margin:0px auto;}
.nav_menu dl{background:url(verline.gif) no-repeat 0px 0; margin-left:12px;} 
.nav_menu dl dt a{height:26px;line-height:26px;overflow:hidden;color:#5e5e5e;font-weight:800;} 
.nav_menu dl dt a span{display:inline-block;width:13px;height:20px;overflow:hidden;float:left;margin:0 5px 0 0;} 
.nav_menu dl dt a.minus span{background:url(showbtn.gif) no-repeat left center;} 
.nav_menu dl dt a.plus span{background:url(hidebtn.gif) no-repeat left center;} 
.nav_menu dl dd li{height:26px;line-height:26px;padding:0 0 0 18px} 
.yjcd{ width:100%; margin:0 auto; background:url(hidebtn1.gif) no-repeat left center; color:#333;padding-left:20px; font-weight:bold; font-size:14px;}
 
.zxr{ width:100%; margin:0 auto; font-size:12px; line-height:30px; border-top:1px dashed #CCC; text-align:right; margin-top:12px;}
 
.cp{ position:relative;width:985px; margin:0 auto; border:1px solid #eeeeee; margin-top:10px; padding:5px;}
.cp span{ position:absolute; width:100px; right:10px; vertical-align:middle; text-align:right;}
.zhifb{ background:#fffbe1; border-bottom:1px dashed #febf90; width:100%; min-height:64px; padding:20px 10px 0px; vertical-align:middle;}
.wangyin{ width:100%; margin:0 auto;}
.wangyin ul{ list-style:none;margin:0 auto;}
.wangyin ul li{width:230px; float:left; margin-left:15px; margin-bottom:15px;}
.bordercs{ border-bottom:1px dashed #fdbf90; width:100%;}
</style>
 
<script type="text/javascript">
    function getObject(objectId) {
        if (document.getElementById && document.getElementById(objectId)) { return document.getElementById(objectId); }
        else if (document.all && document.all(objectId)) {
            return document.all(objectId);
        } else if (document.layers && document.layers[objectId]) { return document.layers[objectId]; } else {
            return false;
        }
    }
    function showHide(e, objname) {
        var obj = getObject(objname); if (obj.style.display == "none") {
            obj.style.display = "block"; e.className = "minus";
        } else { obj.style.display = "none"; e.className = "plus"; }
    }
    function rootClick(dv) {
        var img = dv.getElementsByTagName('img')[0], exp = img.src.indexOf('hidebtn.gif') != -1;
        img.src = exp ? 'showbtn.gif' : 'hidebtn.gif';
        while (dv = dv.nextSibling) {
            if (dv.nodeType == 3) continue;//非IE下的空白节点忽略
            if (dv.className == 'yjcd') break;
            dv.style.display = exp ? 'block' : 'none';
        }    }
    </script> 
 
<div class="memberl">
     <div class="lborder"> 
<div class="nav_menu"> 
 <div class="yjcd" onclick="rootClick(this)"><img src="hidebtn.gif" />配饰</div> 
   <dl style="display:none"> 
     <dt><a href="javascript:void(0);" class="plus" onClick="showHide(this,'items120');"><span></span><a href="#">服饰配件</a></a></dt>
       <dd id="items120" style="display:none;">
          <ul>
             <li><a href="#">围巾丝巾</a></li>
             <li><a href="#">围巾、丝巾、披肩</a></li>
          </ul>
       </dd>
   </dl>
   <dl style="display:none"> 
     <dt><a href="javascript:void(0);" class="plus" onClick="showHide(this,'items119');"><span></span><a href="#">潮流饰品</a></a></dt>
        <dd id="items119" style="display:none;">
          <ul>
            <li><a href="#">耳饰</a></li> 
            <li><a href="#">假发</a></li>
          </ul>
        </dd>
    </dl> 
  <div class="yjcd" onclick="rootClick(this)"><img src="hidebtn.gif" />服装</div> 
     <dl style="display:none"> 
       <dt><a href="javascript:void(0);" class="plus" onClick="showHide(this,'items118');"><span></span><a href="#">时尚男装</a></a></dt>
         <dd id="items118" style="display:none;">
           <ul>  
             <li><a href="#">男时尚衬衫</a></li>
           </ul>
         </dd>
      </dl>
      <dl style="display:none">
        <dt><a href="javascript:void(0);" class="plus" onClick="showHide(this,'items117');"><span></span><a href="#">潮流女装</a></a></dt>
          <dd id="items117" style="display:none;">
            <ul>
               <li><a href="#">职业裤装</a></li>
            </ul>
          </dd>
      </dl> 
</div>
</div></div>

Answer 3

现在一级分类能展开闭合，还有几个问题
1.当展开1级时，2级的图片没了2.是通过<dl style="display:none"> 来控制每一个2级，来达到1级得关闭或打开么？
3.class="plus" class="minus"   这两个现在已经不好使了，都要通过 <dd id="items119" style="display:none;"> 来控制2级？
4.当把所有的style="display:none;" 都去掉时，一级二级都打开，但是一级的图片还是”加“,二级图片没显示不知道是不是也是”加“
大神，帮帮忙，就等你的回复了

Answer 4

css的图片路径我修改过了，没按照你的路径建立，css你不用我的就行了