[共享] 折叠分类，自动展开当前分类。

heyufu

折叠分类，自动展开当前分类，相信好多朋友都在找，需要的拿到用。

category_tree.js的代码如下：

1. 
   
2. 
   
3.      document.getElementsByClassName = function(cl) {
   
4.          var retnode = [];
   
5.          var myclass = new RegExp('\\b'+cl+'\\b');
   
6.          var elem = this.getElementsByTagName('*');
   
7.          for (var j = 0; j < elem.length; j++) {
   
8.              var classes = elem[j].className;
   
9.              if (myclass.test(classes)) retnode.push(elem[j]);
   
10.          }
    
11.          return retnode;
    
12.      }
    
13.    
    
14. 
    
15.      function HideAll() {
    
16.          var items = document.getElementsByClassName("optiton");
    
17.          for (var j=0; j<items.length; j++) {
    
18.              items[j].style.display = "none";
    
19.          }
    
20. 
    
21.      }
    
22.    
    
23. 
    
24.      function setCookie(sName,sValue,expireHours) {
    
25.          var cookieString = sName + "=" + escape(sValue);
    
26.          if (expireHours>0) {
    
27.               var date = new Date();
    
28.               date.setTime(date.getTime + expireHours * 3600 * 1000);
    
29.               cookieString = cookieString + "; expire=" + date.toGMTString();
    
30.          }
    
31.          document.cookie = cookieString;
    
32.      }
    
33.    
    
34.      function getCookie(sName) {
    
35.        var aCookie = document.cookie.split("; ");
    
36.        for (var j=0; j < aCookie.length; j++){
    
37.          var aCrumb = aCookie[j].split("=");
    
38.          if (escape(sName) == aCrumb[0])
    
39.            return unescape(aCrumb[1]);
    
40.        }
    
41.        return null;
    
42.      }
    
43.    
    
44.      window.onload = function() {
    
45.          var show_item = "opt_1";
    
46.          if (getCookie("show_item") != null) {
    
47.               show_item= "opt_" + getCookie("show_item");
    
48. 
    
49.          }
    
50.          document.getElementById(show_item).style.display = "block";
    
51.          var items = document.getElementsByClassName("title");
    
52.          for (var j=0; j<items.length; j++) {
    
53.              items[j].onclick = function() {
    
54.                  var o = document.getElementById("opt_" + this.name);
    
55.                  if (o.style.display != "block") {
    
56.                      HideAll();
    
57.                      o.style.display = "block";
    
58.                      setCookie("show_item",this.name);
    
59.                  }
    
60.                  else {
    
61.                      o.style.display = "none";
    
62.                  }
    
63.              }
    
64.          }
    
65.      }

复制代码

category_tree.lbi 修改如下：

1. 
   
2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
3. <script type="text/javascript" src="js/category_tree.js"></script>
   
4. <style type="text/css">   
   
5.      a:link,a:visited {color:#385065;text-decoration:none}
   
6.      a:hover {text-decoration:underline}
   
7.      #menu {width:150px;margin:0px 15px;padding:0px;text-align:left;list-style:none}
   
8.      #menu .item {margin:5px 0px;padding:0px;list-style:none}
   
9.      a.title:link, a.title:visited, a.title:hover {display:block;background: no-repeat;color:#385065;font-weight:bold;padding:2px 0 0 22px;width:128px;line-height:23px;cursor:pointer;text-decoration:none}
   
10.      #menu .item ul {border:1px solid #9FACB7;margin:0;width:118px;padding:3px 0px 3px 30px;background:#fff;list-style:none;display:none}
    
11.      #menu .item ul li {display:block;}
    
12.      </style>
    
13.    
    
14. <div class="box">
    
15. <ul id="menu">
    
16. <!--{foreach from=$categories item=cat name=cate}-->
    
17. <li class="item"><a href="javascript:void(0)" class="title" name="{$smarty.foreach.cate.iteration}">{$cat.name|escape:html}</a>
    
18.     <ul id="opt_{$smarty.foreach.cate.iteration}" class="optiton">
    
19.         <!--{foreach from=$cat.cat_id item=child}-->
    
20.         <li><a href="{$child.url}">{$child.name|escape:html}</a></li>
    
21.         <!--{/foreach}-->
    
22.    
    
23.     </ul>
    
24. </li>
    
25. <!--{/foreach}-->
    
26. </ul>
    
27. </div>
    
28. <div class="blank5"></div>
    
29. 
    

复制代码

夏天的风

好东西！！谢谢分享~~~

flyhome

支持你!分享!

hemingxun

有没有演示给看一下。 支持共享

hivenus

谢谢！版面一下子清爽许多！支持共享！

晕死

支持，谢谢分享

爱乐堂商城

上个效果图看看哪