獲取當前URL，找到與之匹配的導航項，然后顯示子菜單

Question

我有一個導航菜單，該菜單默認情況下隱藏子菜單。 如果我不在主頁上，則我想顯示與當前位置匹配的導航項的子菜單。

我可以找到當前的路徑名：

var currentUrl = (window.location.pathname);

我知道如何掃描href參數：

$('ul.see li a[href^="/' + location.pathname.split("/")[1] + '"]');

獲取子菜單的第一個目錄。

如何瀏覽導航項並將類添加到父項li？

我的菜單標記如下：

<ul id="mainNavigation">
        <li class="hasKids"><a href="javascript:void(0)">About</a>
            <ul>
                <li><a href="/about/the-salon">The Salon</a>
                </li>
                <li><a href="/about/our-story">Our Story</a>
                </li>
                <li><a href="/about/joe-mills">Joe Mills</a>
                </li>
                <li><a href="/about/stylists">Stylists</a>
                </li>
                <li><a href="/about/products">Products</a>
                </li>
            </ul>
        </li>
        <li class="hasKids"><a href="javascript:void(0)">Services</a>
            <ul >
                <li><a href="/services/colour">Colour</a>
                </li>
                <li><a href="/services/cutting-&amp;-styling">Cutting &amp; Styling</a>
                </li>
                <li><a href="/services/waving-&amp;-straightening">Waving &amp; Straightening</a>
                </li>
                <li><a href="/services/treatments">Treatments</a>
                </li>
            </ul>
        </li>

如您所見，如果我是/ services / colour，我想顯示services子菜單。

Answer 1

問：如何瀏覽導航項並將類添加到父項li？

假設您的錨標簽位於：

var $a = $('ul.see li a[href^="/' + location.pathname.split("/")[1] + '"]');

然后，您可以使用.closest（）方法獲取最接近的LI

$a.closest('li')

然后，添加所需的類...，然后導航至.closest（'ul'）（如果需要在此添加類，等等）。