Question

使用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';
        }
    }
}

Answer 1

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

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

Answer 2

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

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

有关如何设置Cookie并检索其值的详细信息，请参阅this useful tutorial。

使用javascript导航到另一个页面时，保留子菜单的打开/关闭状态

2 个答案: