使用 JS/jquery 的多級側邊欄菜單

Question

對於深度為 3 的多級菜單，我需要一個響應式側邊欄導航（作為使網站響應的一部分）。 html 標記如下，

<nav>
    <div data-level="1">
        <ul>
            <li class="main-menu">
                Level1
                <div data-level="2">
                    <ul>
                        <li class="submodule">
                            example1.1
                            <div data-level="3">
                                <ul>
                                    <li>example1.1.1</li>
                                    <li>example1.1.2</li>
                                    <li>example1.1.3</li>
                                </ul>
                            </div>
                        </li>
                        <li class="submodule">
                            example1.2
                            <div data-level="2">
                                <ul>
                                    <li>example1.2.1</li>
                                    <li>example1.2.2</li>
                                    <li>example1.2.3</li>
                                </ul>
                            </div>
                        </li>
                        <li class="submodule">
                            example1.3
                            <div data-level="2">
                                <ul>
                                    <li>example1.3.1</li>
                                    <li>example1.3.2</li>
                                    <li>example1.3.3</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                Level2
                <div data-level="2">
                    <ul>
                        <li>
                            example2.1
                            <div data-level="3">
                                <ul>
                                    <li>example2.1.2</li>
                                    <li>example2.1.3</li>
                                    <li>example2.1.4</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            example2.2
                            <div data-level="2">
                                <ul>
                                    <li>example2.2.1</li>
                                    <li>example2.2.2</li>
                                    <li>example2.2.3</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            example2.3
                            <div data-level="2">
                                <ul>
                                    <li>example2.3.1</li>
                                    <li>example2.3.2</li>
                                    <li>example2.3.4</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>           
        </ul>
    </div>
</nav>

在第一個菜單只顯示頂層，

1級
2級

單擊 Level1 時應顯示菜單，

返回主菜單
示例 1.1
示例 1.2

單擊 example1.1 時，

返回子級
例子1.1.1
示例1.1.2
示例1.1.3

每個后退按鈕都進入之前的菜單。

如何使用 JS/jQuery 進行導航？

Answer 1

有必要稍微調整一下導航 - 2 級的導航缺少submodule class。 此外，您可以考慮調整<div data-level="3">的使用，因為您僅將其用於第二和第三子級別導航，而第一子級別位於<div data-level="2">中。 以下導航在未完成時滿足您的要求 - 您可以對其進行調整，以便在單擊主導航時切換可見的子級導航。 我已經注意到這個問題，只有一個主導航和子模塊導航同時可見。

 $(".main-menu").on("click", function() { if ($(".main-menu").not(this).find(".submodule").is(":visible")) { $(".main-menu").not(this).find(" > div[data-level='2'], .submodule").hide(); } $(this).find(" > div[data-level='2'], .submodule").toggle(); }); $(".submodule").on("click", function(e) { e.stopPropagation(); $(".submodule").not(this).each(function() { if ($(this).find(" > div[data-level='3'], > div[data-level='2']").is(":visible")) { $(this).find(" > div[data-level='3'], > div[data-level='2']").hide(); } }); $(this).find(" > div[data-level='3'], > div[data-level='2']").toggle(); }); $(".submodule.back").on("click", function(e) { e.stopPropagation(); $(this).closest(".main-menu").find(" > div[data-level='2'], .submodule").hide();; }); $(".back").not(".submodule").on("click", function(e) { e.stopPropagation(); $(this).closest(".submodule").find(" > div[data-level='3'], > div[data-level='2']").hide(); });

 div[data-level ="2"]{ display:none; } div[data-level ="3"]{ display:none; }.submodule { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <div data-level="1"> <ul> <li class="main-menu"> Level1 <div data-level="2"> <ul> <li class="submodule back"> Back to main menu </li> <li class="submodule"> example1.1 <div data-level="3"> <ul> <li class="back">Back to sublevel</li> <li>example1.1.1</li> <li>example1.1.2</li> <li>example1.1.3</li> </ul> </div> </li> <li class="submodule"> example1.2 <div data-level="2"> <ul> <li class="back">Back to sublevel</li> <li>example1.2.1</li> <li>example1.2.2</li> <li>example1.2.3</li> </ul> </div> </li> <li class="submodule"> example1.3 <div data-level="2"> <ul> <li class="back">Back to sublevel</li> <li>example1.3.1</li> <li>example1.3.2</li> <li>example1.3.3</li> </ul> </div> </li> </ul> </div> </li> <li class="main-menu"> Level2 <div data-level="2"> <ul> <li class="submodule back"> Back to main menu </li> <li class="submodule"> example2.1 <div data-level="3"> <ul> <li class="back">Back to sublevel</li> <li>example2.1.2</li> <li>example2.1.3</li> <li>example2.1.4</li> </ul> </div> </li> <li class="submodule"> example2.2 <div data-level="2"> <ul> <li class="back">Back to sublevel</li> <li>example2.2.1</li> <li>example2.2.2</li> <li>example2.2.3</li> </ul> </div> </li> <li class="submodule"> example2.3 <div data-level="2"> <ul> <li class="back">Back to sublevel</li> <li>example2.3.1</li> <li>example2.3.2</li> <li>example2.3.4</li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </nav>