gpt4 book ai didi

javascript css实现三级目录(简单的)

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章javascript css实现三级目录(简单的)由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

是在原先的二级目录改的,先给出演示  。

这里是css  。

/*bg macji(http://www.zzvips.com)*/ ul,li,p{margin:0; padding:0; list-style:none; font-size:12px} .m_menu_title{height:24px;line-height:24px;text-align:center;margin:0 1px} .m_menu_content{border-top:solid 1px #ccc;padding:8px 2px} /*一级*/ .m_menu_content p{height:22px;line-height:22px} .m_menu_content p a{  color:#666633;  font-weight:bold;  text-decoration:none;  background:url(http://www.zzvips.com/blog/img/icon.gif) no-repeat 8px 4px;  padding:0 0 0 30px;  display:block } .m_menu_content p a:hover{color:#fe8005;font-weight:bold;text-decoration:none} .m_menu_content p a.on{background-position:8px -18px} /*二级*/ .menu2{} .menu2 li{line-height:22px} .menu2 a{color:#000;  text-decoration:none;  display:block;  padding:0 0 0 40px;  background:url(http://www.zzvips.com/blog/img/icon.gif) no-repeat 18px 4px } .menu2 a.on{background-position:18px -18px} /*三级*/ .menu2 ul{} .menu2 ul a{  background-position:30px -39px;  padding:0 0 0 50px;  color:#666633;  text-decoration:underline } .menu2 ul a:hover{background-color:#f5f5f5; color:#f60} 

目录是循环的,我给写死了.下面给出js  。

/* 这里是直接写死了,根据传入的id编号,判断是否显示,不显示就显示 id编号是有规律的,可用服务器端语言循环出目录 */ function setMenuList(num){  var p = document.getElementById('p' + num);  var ul = document.getElementById('ul' + num);  if(ul.style.display == ‘none'){  ul.style.display = ”;  p.className = “on”;  }else{  ul.style.display = ‘none';  p.className = “”;  } }

  。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.

最后此篇关于javascript css实现三级目录(简单的)的文章就讲到这里了,如果你想了解更多关于javascript css实现三级目录(简单的)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com