获取当前 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，我想显示服务子菜单。

Answer 1

问：如何浏览导航项并将类添加到父 li 项？

假设你在你的锚标记处：

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

然后，您可以使用 .closest() 方法到达最近的 LI

$a.closest('li')

然后，添加你想要的类...如果你需要在那里添加一个类等，然后导航到它的 .closest('ul') 等等。