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

该博客介绍了一个实现栏目页点击父栏目时自动展开子栏目的方法。提供了一个示例模板的下载链接,其中包含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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 中实现二级栏目的方式主要有两种,一种是使用 HTML5 新增的 nav 和 menu 元素,另一种是使用 ul 和 li 元素结合 CSS 和 JavaScript 实现。下面分别介绍这两种方式的具体实现方法: 1. 使用 nav 和 menu 元素 nav 元素表示导航,menu 元素表示菜单。可以使用 nav 元素包含主导航栏目,然后在主导航栏目中使用 menu 元素包含二级栏目。示例代码如下: ``` <nav> <ul> <li><a href="#">主导航栏目1</a></li> <li><a href="#">主导航栏目2</a> <menu> <li><a href="#">二级栏目1</a></li> <li><a href="#">二级栏目2</a></li> </menu> </li> <li><a href="#">主导航栏目3</a></li> </ul> </nav> ``` 2. 使用 ul 和 li 元素结合 CSS 和 JavaScript 实现 可以使用 ul 和 li 元素创建菜单列表,然后使用 CSS 设置布局和样式,使用 JavaScript 控制菜单的展开和关闭。示例代码如下: ``` <ul> <li><a href="#">主导航栏目1</a></li> <li><a href="#">主导航栏目2</a> <ul> <li><a href="#">二级栏目1</a></li> <li><a href="#">二级栏目2</a></li> </ul> </li> <li><a href="#">主导航栏目3</a></li> </ul> ``` 然后使用 CSS 设置样式,示例代码如下: ``` ul { list-style: none; margin: 0; padding: 0; } ul li { position: relative; display: inline-block; } ul li ul { display: none; position: absolute; top: 100%; left: 0; } ul li:hover ul { display: block; } ``` 最后使用 JavaScript 控制菜单的展开和关闭,示例代码如下: ``` var menuItems = document.querySelectorAll('ul li'); for (var i = 0; i < menuItems.length; i++) { menuItems[i].addEventListener('mouseenter', function() { var subMenu = this.querySelector('ul'); if (subMenu) { subMenu.style.display = 'block'; } }); menuItems[i].addEventListener('mouseleave', function() { var subMenu = this.querySelector('ul'); if (subMenu) { subMenu.style.display = 'none'; } }); } ``` 这样就可以实现 HTML5 中的二级栏目了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值