JavaScript CSS는 레벨 3 디렉토리를 구현합니다 (단순)

저자：Eve Cole 업데이트 시간：2025-04-22 02:00:03

원래 보조 디렉토리에서 수정되었으며 데모가 먼저 제공되었습니다.

여기 CSS가 있습니다

 /*bg macji (http://www.macji.com)*/ul, li, p {마진 : 0; 패딩 : 0; 목록 스타일 : 없음; 글꼴 크기 : 12px} .m_menu_title {높이 : 24px; 라인-하이드 : 24px; 텍스트-정렬 : 중심; 마진; 마진; 마진; 마진 : 0 1px} .m_menu_content {Border-Top : Solid 1px #ccc; 패딩 : 8px 2px} /*First Level* / .m_menu_content. p {높이 : 22px; line-height : 22px} .m_menu_content pa {색상 :#666633; 글꼴 중량 : 대담한; 텍스트 결정 : 없음; 배경 : URL (http://www.macji.com/blog/img/icon.gif) no-repeat 8px 4px; 패딩 : 0 0 30px; 디스플레이 : block} .m_menu_content pa : 호버 {색상 :#fe8005; font-weight : bold; 텍스트-결정 : none} .m_menu_content p.on {배경-위치 : 8px -18px} /*두 번째 레벨* / .menu2 {} .menu2 li {line-height : 22px}. A {색상 :#000; 텍스트 결정 : 없음; 디스플레이 : 블록; 패딩 : 0 0 40px; 배경 : URL (http://www.macji.com/blog/img/icon.gif) no-repeat 18px 4px} .menu2 A.on {배경-위치 : 18px -18px}/*레벨 3*/.menu2 ul {} .menu2 ul a {배경 -39px; 패딩 : 0 0 50px; 색상 :#666633; Text-Decoration : 밑줄} .menu2 ul a : 호버 {배경 색 :#f5f5f5; 색상 :#F60}

디렉토리는 반복되어 죽음에 썼습니다. 여기 JS가 있습니다

 /* 여기에 직접 씁니다. 들어오는 ID 번호에 따르면, 그것이 표시되는지 여부를 결정하는 것이 정상입니다. 표시되지 않으면 표시됩니다. 서버 측 언어*/ 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 = ""; }}

데모보기

 <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.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> 간단한 레벨 3 디렉토리 데모 <스타일>        </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="/ko/wz/12663.html">
                        <div class="text">ASP 최적화, ASP 캐싱 기술</div>
                        <span class="time">2010-05-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/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="/ko/wz/6018.html">
                        <div class="text">ASP와 ASP.NET 간 COOKIES 교환 경험</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/wz/5690.html">
                        <div class="text">ASP.NET 및 MySQL 데이터베이스에 대한 간결한 그래픽 입문 튜토리얼</div>
                        <span class="time">2009-06-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/wz/5418.html">
                        <div class="text">ASP 일반 기능 라이브러리</div>
                        <span class="time">2009-06-26</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/wz/5263.html">
                        <div class="text">ASP 가짜 리퍼러</div>
                        <span class="time">2009-06-25</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/wz/5135.html">
                        <div class="text">ASP 트랜잭션 처리</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/wz/5134.html">
                        <div class="text">Asp: 쿠키 애플리케이션 가이드, 자세한 코드 및 튜토리얼</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/wz/5048.html">
                        <div class="text">ASP는 asp.net의 DataGrid를 모방합니다.</div>
                        <span class="time">2009-06-24</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/wz/4933.html">
                        <div class="text">ASP 소스 코드 해독</div>
                        <span class="time">2009-06-23</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/wz/80.html">
                        <div class="text">ASP 강의 4: ASP 내장 구성 요소</div>
                        <span class="time">2009-05-30</span>
                    </a>
                </li>	
			                <li>
                    <a  href="/ko/wz/79.html">
                        <div class="text">ASP 강의 5: 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>