Javascript 如果用户在该部分的某个页面上，是否保持下拉列表可见？

我使用一些基本的JavaScript在默认情况下隐藏子导航，除非单击父项。问题是，如果单击子菜单中的链接，则在浏览器刷新时下拉列表将关闭。我想知道如何才能使下拉列表保持打开状态，如果用户所在的页面在该下拉列表中

这是我的HTML：

<ul id="navigation">
    <li><a href="page1" />Page 1</a></li>
    <li><a href="page2" />Page 2</a></li>
    <li><span>Section 1</span>
        <ul class="subnav">
            <li><a href="s1page1" />Section 1 Page 1</a></span></li>
            <li><a href="s1page2" />Section 1 Page 2</a></span></li>
        </ul>
    </li>
    <li><span>Section 2</span>
        <ul class="subnav">
            <li><span><a href="s2page1" />Section 2 Page 1</a></span></li>
            <li><span><a href="s2page2" />Section 2 Page 2</a></span></li>
        </ul>
    </li>
    <li><a href="page3" />Page 3</a></li>
</ul>

---

您的HTML有一些问题

<ul id="navigation">
    <li><a href="page1">Page 1</a></li>
    <li><a href="page2">Page 2</a></li>
    <li><span>Section 1</span>
        <ul class="subnav" style="display:none;">
            <li><a href="s1page1">Section 1 Page 1</a></li>
             <li><a href="s1page2">Section 1 Page 2</a></li>
        </ul>
    </li>
    <li><span>Section 2</span>
        <ul class="subnav" style="display:none;">
            <li><a href="s2page1">Section 2 Page 1</a></li>
            <li><a href="s2page2">Section 2 Page 2</a></li>
        </ul>
    </li>
    <li><a href="page3">Page 3</a></li>
</ul>

---

为什么会发生浏览器刷新？如果使用锚定，如果存在锚定，则可以使用函数打开菜单：

http://foo.com/#menu1

提示菜单1已打开。当他们单击LI Span时，它会下拉菜单，但如果他们单击子菜单中的一个链接，它会将他们带到该页面，菜单将再次关闭。我猜refresh这个词用错了。谢谢，我已经在ULs的CSS文件中显示了：none，我删除了那些放错位置的跨距。我添加了StopRopagation，但当导航到其中一个菜单链接时，菜单仍然关闭。

<ul id="navigation">
    <li><a href="page1">Page 1</a></li>
    <li><a href="page2">Page 2</a></li>
    <li><span>Section 1</span>
        <ul class="subnav" style="display:none;">
            <li><a href="s1page1">Section 1 Page 1</a></li>
             <li><a href="s1page2">Section 1 Page 2</a></li>
        </ul>
    </li>
    <li><span>Section 2</span>
        <ul class="subnav" style="display:none;">
            <li><a href="s2page1">Section 2 Page 1</a></li>
            <li><a href="s2page2">Section 2 Page 2</a></li>
        </ul>
    </li>
    <li><a href="page3">Page 3</a></li>
</ul>

$(function(){
    $('#navigation').find('span').click(function(e){
        e.stopPropagation();
        $(this).parent().find('ul').toggle();
    });
});