javascript - 将 jQuery 与折叠菜单一起使用

Question

目前我的侧边菜单由父页面和子页面组成。为了使子页面上的菜单保持展开状态，我必须使用 switch 语句并检查 url 是否是我要查找的内容，如果匹配则显示展开的子项。

 $(function () {
        var url = window.location.pathname;
        switch (url) {
            case 'Path1':
                $('#ChildOne').show();
                break;
            case 'Path2':
                $('#ChildTwo').show();
                break;
            case 'Path3':
                $('#ChildThree').show();
                break;
            ...
        }
    });

我有 20 多个页面需要显示子元素。我的问题是，这是唯一的方法还是有人知道更好的方法？在此先感谢您的帮助。

注意

我只想在事件子页面上显示相关的子元素。假设，当我被重定向到该页面时，我单击 ChildOne 我只想查看该父元素下的子元素。

我的标记如下

<ul>
    <li class="parent"><a style="cursor: pointer;">Parent One</a>
        <ul class="child" id="ChildOne">
            <li><a href="#">Child Of Parent One</a></li>
            <li><a href="#">Child Of Parent One</a></li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Two</a>
        <ul class="child" id="ChildTwo">
            <li><a href="#">Child Of Parent Two</a></li>
            <li><a href="#">Child Of Parent Two</a></li>
            <li><a href="#">Child Of Parent Two</a></li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Three</a>
        <ul class="child" id="ChildThree">
            <li><a href="#">Child Of Parent Three</a></li>
            <li><a href="#">Child Of Parent Three</a></li>
        </ul>
    </li>
   ...
</ul>

Answer 1

我添加了一些代码以便能够重现该问题。我向菜单的父项添加了一些类，以便稍后检查它们以隐藏或不隐藏它们的子项。类名称是唯一的页面名称(url 上的最后一个词)。我使用子字符串方法获取它。

在这个例子中，您的当前页面是第二个选项，通过使用 jquery 的 each() 函数，您可以遍历元素而无需大量的 switch cases 或 if 语句。

Fiddle

代码片段:

function escocha() {
    var url = '/about/profile'
    var n = url.lastIndexOf("/");
    var myClassName = url.substring(n + 1, url.length)

    alert("The url: " + url);
    alert("The class name: " + myClassName);

    $(".child").each(function (index) {
        alert(this.id);
        if (this.className.indexOf(myClassName) > -1) { // if any class name for this element contains the string 'display'
            alert("I am the current page so my menu items won't collapse!");
        } else {
            $('#' + this.id).hide();
        }
    });
}

$("#esmaga").click(function () {
    escocha();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="parent"><a style="cursor: pointer;">Parent One</a>

        <ul class="child display" id="ChildOne">
            <li><a href="#">Child Of Parent One</a>

            </li>
            <li><a href="#">Child Of Parent One</a>

            </li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Two</a>

        <ul class="child profile" id="ChildTwo">
            <li><a href="#">Child Of Parent Two</a>

            </li>
            <li><a href="#">Child Of Parent Two</a>

            </li>
            <li><a href="#">Child Of Parent Two</a>

            </li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;">Parent Three</a>

        <ul class="child display" id="ChildThree">
            <li><a href="#">Child Of Parent Three</a>

            </li>
            <li><a href="#">Child Of Parent Three</a>

            </li>
        </ul>
    </li>...</ul>
<button id="esmaga">Esmaga</button>