JavaScript CSS implémente un répertoire de niveau trois (simple)

Auteur：Eve Cole Date de mise à jour：2025-04-22 02:00:03

Il a été modifié dans le répertoire secondaire d'origine, et une démonstration a été présentée en premier

Voici CSS

 / * bg macji (http://www.macji.com) * / ul, li, p {margin: 0; rembourrage: 0; Style de liste: aucun; FONT-SIZE: 12px} .m_menu_title {hauteur: 24px; line-height: 24px; text-align: Center; margin: 0 1px} .m_menu_content {border-top: solide 1px #ccc; padding: 8px 2px} / * premier niveau * / .m_menu_content p {hauteur: 22px; line-height: 22px} .m_menu_content pa {couleur: # 666633; Police-poids: Bold; Décoration du texte: aucune; Contexte: URL (http://www.macji.com/blog/img/icon.gif) No-Repeat 8px 4px; rembourrage: 0 0 0 30px; Affichage: Block} .m_menu_content PA: Hover {Color: # fe8005; Font-Weight: Bold; Text-Decoration: Aucun} .m_menu_content P a.on {Background Position: 8px -18px {Line-Height: 22Px}. A {couleur: # 000; Décoration du texte: aucune; Affichage: bloc; rembourrage: 0 0 0 40px; Contexte: URL (http://www.macji.com/blog/img/icon.gif) No-Repeat 18px 4px} .Menu2 a.on {background-position: 18px -18px} / * niveau 3 * / .menu2 ul {} .menu2 ul a {background-position: 30px -39px; rembourrage: 0 0 0 50px; Couleur: # 666633; text-décoration: soulignement} .menu2 ul a: hover {background-color: # f5f5f5; Couleur: # F60}

Le répertoire est bouclé, je l'ai écrit à mort. Voici un js

 / * Ici, je l'écris directement. Selon le numéro d'identification entrant, il est normal de déterminer s'il est affiché. S'il n'est pas affiché, il est affiché. Vous pouvez éteindre le répertoire avec le langage côté serveur * / fonction setMenulist (num) {var p = document.getElementById ('p' + num); var ul = document.getElementById ('ul' + num); if (ul.style.display == 'Aucun') {ul.style.display = 'Aucun') {ul.style.display = 'Aucun'; } else {ul.style.display = 'Aucun'; p.classname = ""; }}

Vue de démonstration

 <! 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"> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <ititle> Demo du répertoire de niveau 3 simple </ 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">Articles connexes</span>
        </div>
        <ul class="cate_list_template">
				
       				                <li>
                    <a  href="/fr/wz/12663.html">
                        <div class="text">Optimisation Asp, technologie de mise en cache ASP</div>
                        <span class="time">2010-05-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/6261.html">
                        <div class="text">Notes d'application du didacticiel de données ASP.NET 2.0 de Scott Mitchell</div>
                        <span class="time">2009-07-01</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/6018.html">
                        <div class="text">Une certaine expérience dans l'échange de COOKIES entre ASP et ASP.NET</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/5690.html">
                        <div class="text">Un didacticiel d'introduction graphique concis pour les bases de données ASP.NET et MySQL</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/5418.html">
                        <div class="text">Bibliothèque de fonctions générales ASP</div>
                        <span class="time">2009-06-26</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/5263.html">
                        <div class="text">Faux RÉFÉRENT ASP</div>
                        <span class="time">2009-06-25</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/5135.html">
                        <div class="text">traitement des transactions asp</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/5134.html">
                        <div class="text">Asp : Guide d'application des cookies, code détaillé et tutoriels</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/5048.html">
                        <div class="text">ASP imite le DataGrid d'asp.net</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/4933.html">
                        <div class="text">Décrypter le code source ASP</div>
                        <span class="time">2009-06-23</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/80.html">
                        <div class="text">Conférence ASP 4 : Composants intégrés ASP</div>
                        <span class="time">2009-05-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/fr/wz/79.html">
                        <div class="text">Conférence ASP 5 : Composants ASP (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>