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 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} /*二級*/ .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>        </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-tw/wz/12663.html">
                        <div class="text">Asp優化，asp快取技術</div>
                        <span class="time">2010-05-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/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-tw/wz/6018.html">
                        <div class="text">ASP與ASP.NET互通COOKIES的一點經驗</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/wz/5690.html">
                        <div class="text">ASP.NET與MySQL資料庫簡明圖示入門教學課程</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/wz/5418.html">
                        <div class="text">ASP通用函數庫</div>
                        <span class="time">2009-06-26</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/wz/5263.html">
                        <div class="text">ASP偽造REFERER</div>
                        <span class="time">2009-06-25</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/wz/5135.html">
                        <div class="text">asp事務處理</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/wz/5134.html">
                        <div class="text">Asp:Cookies應用指南,詳細程式碼及教學課程</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/wz/5048.html">
                        <div class="text">ASP模仿asp.net的DataGrid</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/wz/4933.html">
                        <div class="text">解密ASP原始碼</div>
                        <span class="time">2009-06-23</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/wz/80.html">
                        <div class="text">ASP講座之四：ASP內建組件</div>
                        <span class="time">2009-05-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/zh-tw/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>