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

作者：Eve Cole 更新时间：2025-04-22 02:00:03

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

这里是css

/*bg macji(http://www.macji.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.macji.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.macji.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 = “”;  } }

演示查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简易三级目录演示</title><style><!-- /*bg maiji(http://www.macji.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.macji.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.macji.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}        </div>
    </div>
</section>
<section class="section_box py_30 border_bottom">
    <div class="w12_box">
        <div class="title_template arrow_link">
            <span class="title">相关文章</span>
        </div>
        <ul class="cate_list_template">
				
       				                <li>
                    <a  href="/zh-cn/wz/12663.html">
                        <div class="text">Asp优化，asp缓存技术</div>
                        <span class="time">2010-05-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/6261.html">
                        <div class="text">Scott Mitchell 的ASP.NET 2.0数据教程之应用笔记</div>
                        <span class="time">2009-07-01</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/6018.html">
                        <div class="text">ASP与ASP.NET互通COOKIES的一点经验</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/5690.html">
                        <div class="text">ASP.NET与MySQL数据库简明图示入门教程</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/5418.html">
                        <div class="text">ASP通用函数库</div>
                        <span class="time">2009-06-26</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/5263.html">
                        <div class="text">ASP伪造REFERER</div>
                        <span class="time">2009-06-25</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/5135.html">
                        <div class="text">asp事务处理</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/5134.html">
                        <div class="text">Asp:Cookies应用指南,详细代码及教程</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/5048.html">
                        <div class="text">ASP模仿asp.net的DataGrid</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/4933.html">
                        <div class="text">解密ASP源代码</div>
                        <span class="time">2009-06-23</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/80.html">
                        <div class="text">ASP讲座之四：ASP内置组件</div>
                        <span class="time">2009-05-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-cn/wz/79.html">
                        <div class="text">ASP讲座之五：ASP组件（二）</div>
                        <span class="time">2009-05-30</span>
                    </a>
                </li>	
							
		        </ul>
    </div>
</section>
<footer class="footer_template">
    <div class="w12_box">
        <div class="clearfix">
            <div class="l_item">
                <img src="https://images.downcodes.com/newdown/images/down-logo-foot.png" alt="">
                <div class="f_icon">
                    <a href="https://www.facebook.com/" title="facebook"></a>
                    <a href="https://telegram.org/" title="telegram"></a>
                    <a href="https://www.tiktok.com/" title="tiktok"></a>
                    <a href="https://www.youtube.com/" title="youtube"></a>
                </div>
            </div>
            <div class="r_item">
                <dl>
                    <dt>Products & Services</dt>
                    <dd><a href="javascript:;">Install APK</a></dd>
                    <dd><a href="javascript:;">APK signature verification</a></dd>
                    <dd><a href="javascript:;">APK Download Service</a></dd>
                </dl>
                <dl>
                    <dt>Company</dt>
                    <dd><a href="javascript:;">Developer Console</a></dd>
                    <dd><a href="javascript:;">Submit APK</a></dd>
                    <dd><a href="javascript:;">Monetization of traffic through downcodes</a></dd>
                </dl>
                <dl>
                    <dt>Legal</dt>
                    <dd><a href="javascript:;">About us</a></dd>
                    <dd><a href="javascript:;">Contact Us</a></dd>
                    <dd><a href="javascript:;">Cooperation</a></dd>
                </dl>
            </div>

        </div>
        <p>downcodes@gmail.com</p>
    </div>
</footer>
<!-- Matomo -->
<script>
    var _paq = window._paq = window._paq || [];
    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
        var u="//tongji.zhangwan.net/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '3']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
</script>
<!-- End Matomo Code -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5D64MDP2H8"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-5D64MDP2H8');
</script>
</body>
<script src="/newdown/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/newdown/js/lazy.js" type="text/javascript" charset="utf-8"></script>
<script src="/newdown/js/index.js" type="text/javascript" charset="utf-8"></script>
</html>