JavaScript CSS implements a level three directory (simple)

Author：Eve Cole Update Time：2025-04-22 02:00:03

It was modified in the original secondary directory, and a demonstration was given first

Here is 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} /*First level*/ .m_menu_content p{height:22px;line-height:22px} .m_menu_content pa{ 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 pa:hover{color:#fe8005;font-weight:bold;text-decoration:none} .m_menu_content p a.on{background-position:8px -18px} /*Second level*/ .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} /*Level 3*/ .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}

The directory is looped, I wrote it to death. Here is a js

 /* Here I write it directly. According to the incoming id number, it is normal to determine whether it is displayed. If it is not displayed, it is displayed. You can loop out the directory with the server-side language*/ function setMenuList(num){ var p = document.getElementById('p' + num); var ul = document.getElementById('ul' + num); if(ul.style.display == 'none'){ ul.style.display = 'none'){ ul.style.display = 'none'; }else{ ul.style.display = 'none'; p.className = ""; } }

Demo view

 <!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>Simple Level 3 Directory Demo</title><style>        </div>
    </div>
</section>
<section class="section_box py_30 border_bottom">
    <div class="w12_box">
        <div class="title_template arrow_link">
            <span class="title">Related Articles</span>
        </div>
        <ul class="cate_list_template">
				
       				                <li>
                    <a  href="/wz/12663.html">
                        <div class="text">Asp optimization, asp caching technology</div>
                        <span class="time">2010-05-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/6261.html">
                        <div class="text">Scott Mitchell's ASP.NET 2.0 Data Tutorial Application Notes</div>
                        <span class="time">2009-07-01</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/6018.html">
                        <div class="text">Some experience in exchanging COOKIES between ASP and ASP.NET</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/5690.html">
                        <div class="text">A concise graphical introductory tutorial for ASP.NET and MySQL databases</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/5418.html">
                        <div class="text">ASP general function library</div>
                        <span class="time">2009-06-26</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/5263.html">
                        <div class="text">ASP fake REFERER</div>
                        <span class="time">2009-06-25</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/5135.html">
                        <div class="text">asp transaction processing</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/5134.html">
                        <div class="text">Asp: Cookies application guide, detailed code and tutorials</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/5048.html">
                        <div class="text">ASP imitates asp.net's DataGrid</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/4933.html">
                        <div class="text">Decrypt ASP source code</div>
                        <span class="time">2009-06-23</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/80.html">
                        <div class="text">ASP Lecture 4: ASP Built-in Components</div>
                        <span class="time">2009-05-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/wz/79.html">
                        <div class="text">ASP Lecture 5: ASP Components (2)</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>