如果选择了子菜单，则展开父菜单 [英] Expand parent menu if child menu is selected

问题描述

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

I have a menu with sub child menus. The problem I am facing is that whenever I select a child menu after page loads, the menu collapses. I want to open the parent menu expanded.

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

});

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

How can i expand the parent menu if child menu is selected.

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

推荐答案

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

You have the full, absolute URL's in the links; that can be used to your advantage. Simply use document.querySelector with the square bracket selector, and the location.href property:

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

然后，做任何您需要做的.在此示例中，我添加了selected类.

Then, do whatever you need to do to it. In this example, I'm adding the selected class.

小提琴

这篇关于如果选择了子菜单，则展开父菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！