Question

我使用一些基本的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>

我的JavaScript：

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

Answer 1

您的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>

还可以使用stopPropagation来防止任何事件冒泡

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

如果用户位于该部分的页面上，则可以看到下拉列表吗？

1 个答案: