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

您可以使用与window.location.pathname相同的UL元素的id。在这种情况下，您可以致电：

try{
   $("#"+window.location.pathname).show();
}catch(e){
   // error handling
}

但你的菜单很奇怪;）

好的，还有一个带对象的版本

var oPath = new Object({
        "Path1":"ChildOne",
        "Path2":"ChildTwo",
        "Path3":"ChildThree"
});

try{
     $("#"+ oPath[window.location.pathname]).show();
}catch(e){}

Answer 2

我添加了一些代码以便能够重现该问题。我在菜单的父项中添加了一些类，以便稍后检查它们以隐藏或不隐藏它们的子项。类名是页面名称（URL上的最后一个单词），它是唯一的。我使用substring方法得到它。

在这个例子中，你当前的页面是第二个选项，通过使用jquery的each()函数，你可以浏览元素，而不需要大量的switch case或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>

使用jQuery和折叠菜单

2 个答案: