如果选择了子菜单，则展开父菜单答案

【问题标题】：Expand parent menu if child menu is selected如果选择了子菜单，则展开父菜单
【发布时间】：2016-05-06 07:59:26
【问题描述】：

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

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>');

});

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

小提琴：https://jsfiddle.net/x415mjfq/

【问题讨论】：

有什么问题？我可以一路展开菜单：i.imgur.com/lvPLtnJ.png
@Hatchet 这不是问题所在。当您导航到子页面时，他希望在页面加载时保留打开的菜单。这真的不能在小提琴中演示

标签： javascript jquery css menu

【解决方案1】：

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

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

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

Fiddle

【讨论】：

你能告诉我应该把这个链接放在我的 js 中的什么地方吗？
这只是一个例子。在将其发布到您的网站之前，您需要自己对其进行编辑。您需要添加正确的 CSS，并更改 JavaScript 以满足您的需要。现在，它只选择了a 标签。您可以遍历 DOM 并从那里选择和设置您需要的任何元素。
你必须首先在你的 CSS 中定义 selected 类。如果您使用自己的 URL，它也不会在小提琴中工作。