实现栏目页点击父栏目展开子栏目效果。

该博客介绍了一个实现栏目页点击父栏目时自动展开子栏目的方法。提供了一个示例模板的下载链接,其中包含js代码实现这一功能。通过修改DOM元素的样式和属性,实现了点击父栏目切换子栏目显示状态的效果。
摘要由CSDN通过智能技术生成

解决方法:

示例模板下载地址:http://download.csdn.net/detail/u010205757/5295455

示例模板中js代码如下

<script type="text/javascript">

function selectLayer1(obj)

{

       var tabs = document.getElementById("tagtab");

       for(var i=0;i<tabs.children.length;i++){

              if(obj.abbr==tabs.children[i].id){

                     tabs.children[i].className="new_mulu";

              }else{

                     tabs.children[i].className="new_mulu1";

              }

       }

 

       document.getElementById("tagtitle").innerText = obj.innerText;

}

 

function showztxxsubs(){

       var obj = document.getElementById("ztxxsubs");

       if(obj.style.display=="none"){

              event.srcElement.parentElement.children[0].children[0].width="7";

              event.srcElement.parentElement.children[0].children[0].height="7";

            event.srcElement.parentElement.children[0].children[0].src="/jcms/jcms_files/jcms1/web1/site/picture/1/110411105951811.jpg";

              obj.style.display="";

       }else{

              event.srcElement.parentElement.children[0].children[0].width="7";

              event.srcElement.parentElement.children[0].children[0].height="7";

            event.srcElement.parentElement.children[0].children[0].src="/jcms/jcms_files/jcms1/web1/site/picture/1/110411105951811.jpg";

              obj.style.display="none";

       }

 

}

 

设参代码如下:

父栏目:

<!--for-->

<table οnclick="showjgszsubs()"  width="95%" height="31" border="0" align="center" cellpadding="0" cellspacing="0" style=" cursor:pointer" >

 <tr> 

  <td width="40" align="center"><!--colunmheader--></td>

  <td align="left"   style="color:#5b5b5b; font-size:14px" ><a style="font-size:14px; color:#5b5b5b; TEXT-DECORATION: none" href='<!--columnurl-->'  ><!--columnname--></a></td>

  </tr>

  </table>

 <!--/for-->

子栏目:

<table width="95%" height="31" border="0" align="center" cellpadding="0" cellspacing="0" style="display:none;"id="jgszsubs" >

<!--for-->

 <tr >

  <td width="20" ></td>

  <td width="20" align="right">

    </td>

  <td align="left" id="jsbj" abbr="lb_mjwx" οnclick="selectLayer1(this)"  height="24" nowrap="nowrap" style=" color:#5b5b5b" >&nbsp;&nbsp;<a href='<!--columnurl-->'  style="color:#5b5b5b; font-size:12px; text-decoration:none;" ><!--columnname--></a></td>

  </tr>

   <!--/for-->

  </table>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值