javascript - 导航到另一个页面后保持下拉菜单打开

Question

我有这个侧面菜单，每个项目都有子项目，单击时会转到另一个页面。

当我按下 MAIN 的子项 News 并加载另一个页面时，菜单会像第一张照片中那样折叠。有什么方法可以在导航到其他页面时保持菜单打开。下面是我的 HTML 代码。我已经被这个问题困扰了两天了。我在这里尝试过类似问题的选项，但没有运气。我对前端开发相当陌生，因此我们将不胜感激。

<div id="main-menu" class="main-menu collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="{% url 'home' %}"> <i class="menu-icon fa fa-home"></i>Home </a></li>
                <h3 class="menu-title">L&amp;D</h3><!-- /.menu-title -->
                <li class="menu-item-has-children dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-calendar"></i>MAIN</a>
                    <ul id="navigation" class="sub-menu children dropdown-menu">
                        <li><a href="{% url 'news' %}">News</a></li>
                        <li><a href="{% url 'sport' %}">Sport</a></li>
                        <li><a href="{% url 'lifestyle' %}">Lifestyle</a></li>
                        <li><a href="{% url 'economy' %}">Economy</a></li>
                        <li><a href="{% url 'politics' %}">Politics</a></li>
                    </ul>
                </li>
                <li class="menu-item-has-children dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-bolt"></i>ABOUT</a>
                    <ul class="sub-menu children dropdown-menu">
                        <li><a href="{% url 'authors' %}">Authors</a></li>
                        <li><a href="{% url 'history' %}">History</a></li>
                        <li><a href="{% url 'trivia' %}">Trivia</a></li>
                    </ul>
                </li>
            </ul>
        </div>

Answer 1

var url = location.href;

$('.sub-menu').each(function() {
    var $dropdownmenu = $(this);
    $(this).find('li').each(function() {
        if( $(this).find('a').attr('href')== url ) {
            console.log( $dropdownmenu ); // this is your dropdown menu which you want to display
            console.log($($dropdownmenu).parents('li')); // this is the parent list item of the dropdown menu. Add collapse class or whatever that collapses its child list
        }
    });
});

这段代码会有帮助

*已修改