javascript - 如果选择了子菜单，则展开父菜单

Question

我有一个带有子子菜单的菜单。我面临的问题是，每当我在页面加载后选择子菜单时，菜单就会折叠。我想打开展开的父菜单。

HTML 代码是:

---

<div id='cssmenu'>
        <ul>
            <li><a href='http://internallink.com/home'><span>Home</span></a></li>
            <li class='active has-sub'><a href='http://internallink.com/products'><span>Products</span></a>
                <ul>
                    <li class='has-sub'><a href='http://internallink.com/product1'><span>Product 1</span></a>
                        <ul>
                            <li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
                            <li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
                        </ul>
                    </li>
                    <li class='has-sub'><a href='http://internallink.com/product2'><span>Product 2</span></a>
                        <ul>
                            <li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
                            <li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href='http://internallink.com/about'><span>About</span></a></li>
            <li class='last'><a href='http://internallink.com/contact'><span>Contact</span></a></li>
        </ul>
    </div>

JS 是:

---

jQuery(document).ready(function () {
    jQuery('#cssmenu').on("click","li.has-sub .holder",function () {
        var element = jQuery(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
    });

    jQuery('#cssmenu ul li.has-sub').prepend('<span class="holder"></span>');

});

如果选择了子菜单，我如何展开父菜单。

fiddle :https://jsfiddle.net/x415mjfq/

Answer 1

您在链接中有完整的绝对 URL；这可以为您所用。只需将 document.querySelector 与方括号选择器和 location.href 属性一起使用:

document.querySelector("a[href='" + location.href + "']").classList.add("selected");

然后，做任何你需要做的事情。在此示例中，我添加了 selected 类。

Fiddle