Question

我有一个侧面菜单，每个子菜单都有子项，单击后可以转到另一个页面。

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

TIME

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

此代码会有所帮助

*已修改

Answer 2

也许您可以将菜单的“状态”保存在cookie或会话中（例如快照），并在加载页面时读取。

Answer 3

展开每个主列表项时，将添加一个show类。您可以检查用户要访问的URL，如果在该子菜单下，则可以通过模板引擎将其传递到列表项的类列表中。看起来像

<li class="menu-item-has-children dropdown {% if showClass %}show{% endif %}">

并决心

<li class="menu-item-has-children dropdown show">

因此在下一页扩展。

编辑：同一类需要添加到父<ul>下的<li>元素中，即

<li class="menu-item-has-children dropdown {% if showClass %}show{% endif %}">
...
<ul id="navigation" class="sub-menu children dropdown-menu {% if showClass %}show{% endif %}">

Answer 4

使用javascript找到与当前URL匹配的锚，然后切换其父级的可见性。

显然，您需要调整以适应您的特定需求。

$(document).ready(function(){
     //var current_url = window.location.href;
     var current_url = "news";
     $(".sub-menu").find("a[href='" + current_url + "']").closest("ul").addClass("show");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="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>

导航到另一页后，保持下拉菜单打开

4 个答案: