0

使用 JavaScript 导航到另一个页面时，如何保留子菜单的打开/关闭状态？我尝试使用此代码在导航到另一个页面时保持菜单状态，但它对我不起作用。也许我错过了什么。

<ul class="catMenuItem">
    <li><a style="background-image: url(&quot;images/triangle_down.gif&quot;);" href="#"
        class="titleTriangle"><span>cat1</span></a></li>
    <li style="display: block;" class="catSubMenu">
        <a href="?cat=2">sub 1-2</a> (0)
        <a href="?cat=7">sub 1-3</a> (2)
        <a href="?cat=8">sub 1-4</a> (0)
        <a href="?cat=9">sub 1-5</a> (0)
    </li>
</ul>
<ul class="catMenuItem">
    <li>
        <a href="#" class="titleTriangle"><span>cat2</span></a>
    </li>
    <li style="display: none;" class="catSubMenu">
        <a href="?cat=3">sub 2-1</a> (0)<br>
        <a href="?cat=4">sub 2-2</a> (0)<br>
        <a href="?cat=5">sub 2-3</a> (0)<br>
        <a href="?cat=6">sub 2-4</a> (1)<br>
        <br>
    </li>
</ul>

var prevCat;
function menu(newCat) {
    var mens;
    var anchors;
    if (prevCat) {
        mens = prevCat.parentNode.getElementsByTagName('li')[0];
        anchors = mens.getElementsByTagName('a')[0].style.backgroundImage = 'url(images/triangle_right.gif)';
        prevCat.style.display = 'none';
    }

    if (newCat != prevCat) {
        mens = newCat.parentNode.getElementsByTagName('li')[0];
        anchors = mens.getElementsByTagName('a')[0].style.backgroundImage = 'url(images/triangle_down.gif)';
        newCat.style.display = 'block';
        prevCat = newCat;
    } else {
        prevCat = null;
    }

}

onload = function () {
    var menus = document.getElementsByTagName('ul');
    for (var a = 0, x = menus.length; a < x; a++) {
        if (menus[a].className === 'catMenuItem') {
            menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function () {
                menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
            }
            menus[a].getElementsByTagName('li')[1].style.display = 'none';
        }
    }
}
4

2 回答 2

0

此代码不起作用，因为当您单击其中一个菜单项时，浏览器会导航到另一个页面。在这种情况下，值prevCat始终是null，因为 javascript 变量不会在页面加载时持续存在。您最有可能从互联网上获取的代码适用于您停留在同一页面上的情况 - 在这种情况下prevCat，每次页面加载都不会清除 的值。

您需要的是在每次更改时将状态存储在localStorage（请参阅this和this以供参考）并在页面加载时恢复它。

于 2013-04-04T07:14:40.400 回答
0

为了在不同的页面上保留这些信息，您需要以某种方式将其存储在客户端或服务器上。

我建议您使用 cookie 来存储 prevCat 的值并在加载页面时从 cookie 中检索它。

有关如何设置 cookie 和检索它的值的更多详细信息，请参阅这个有用的教程。

于 2013-04-04T07:15:31.777 回答