我想将此css代码转换为可折叠/可扩展列表

时间:2013-10-20 08:00:46

标签: html css styles expandablelistview collapsable

这是我的代码。我想将此css代码转换或更改/添加到类别的可折叠/可扩展列表,而不更改其类的名称和& id的名字。 由于必须使用主类别项目符号/项目符号图像来创建所有子类别下的可折叠/可扩展列表。

不要改变它的外观。如果可能,请添加到该类或ID。

<style type='text/css'>
 #directory .catcol ul{list-style-type:none; padding:10px 8px}
 #directory .catcol{float:left; width:33%}
 #directory .catcol ul.maincat-list{}
 #directory .catcol ul li.maincat { border-bottom:1px solid #DDDDDD; font-weight:bold; padding:0 0 2px; text-transform:uppercase; margin-bottom:15px; }
 #directory .catcol ul li.maincat a{text-decoration:none;}
 #directory .catcol li.maincat > ul.subcat-list { border-top:1px solid #DDDDDD; border-bottom:1px solid #FFFFFF; margin-bottom:-3px; padding-bottom:8px; }
 #directory .catcol ul.subcat-list{padding:5px;}
 #directory .catcol ul li.cat-item{font-weight:normal; text-transform:none; background:transparent url(images/bullet-grey.png) no-repeat scroll 4px 6px; line-height:20px; padding:0 0 0 12px}
 #directory .catcol ul li.cat-item a{text-decoration:none; color:#545454;}
 #directory .catcol ul li.maincat a:hover, #directory .catcol ul li.cat-item a:hover{text-decoration:underline}
 #directory .catcol ul li{line-height:20px; padding:5px 0 2px 10px; text-shadow:0 1px 0 #FFFFFF;}
 #directory .catcol ul li.cat-item:hover{}
 #directory .catcol ul.children {list-style-type:none; padding:5px 0; margin:0 0 -10px -12px;}
 #directory .catcol ul.children li {background:transparent url(images/bullet-grey.png) no-repeat scroll 12px 11px; border-bottom:none; border-top:1px solid #EFEFEF;}
 #directory .catcol ul.children li a {margin-left:8px;}
 #directory.twoCol .catcol { width: 50%; }
</style>


<div id="directory" class="directory twoCol">
<div class="catcol  first">
    <ul class="maincat-list">
        <li class="maincat cat-item-32"><a href="http://example.com/automobiles/" title="">Automobiles</a>  
            <ul class="subcat-list"><li class="cat-item cat-item-33"><a href="http://example.com/cat/automobiles/cars/" title="">Cars</a></li></ul>
        </li>
        <li class="maincat cat-item-37"><a href="http://example.com/cat/home-lifestyle/" title="">Home &amp; Lifestyle</a>
            <ul class="subcat-list"><li class="cat-item cat-item-38"><a href="http://example.com/cat/home-lifestyle/clothing/" title="">Clothing</a></li></ul>
        </li>
        <li class="maincat cat-item-2"><a href="http://example.com/cat/misc/" title="">Misc</a>  </li></ul>
</div><!-- /catcol -->

<div class="catcol ">
    <ul class="maincat-list">
        <li class="maincat cat-item-8"><a href="http://example.com/cat/mobiles-phones/" title="">Mobiles Phones</a>
            <ul class="subcat-list"><li class="cat-item cat-item-9"><a href="http://example.com/cat/mobiles-phones/phones/" title="">Phones</a></li></ul>
        </li>
        <li class="maincat cat-item-13"><a href="http://example.com/cat/office-shops-space/" title="">Office / Shops / Space</a></li></ul>

</div><!-- /catcol -->
<div class="clr"></div></div>

Plzz ......帮助我!!

0 个答案:

没有答案