在网站的新页面上保持 jquery 下拉菜单打开答案

【问题标题】：Keep jquery dropdown menu open on the new page of web site在网站的新页面上保持 jquery 下拉菜单打开
【发布时间】：2014-10-01 11:24:18
【问题描述】：

我有一种下拉菜单。但是当我点击一些子菜单链接时，我的网站的新页面正在打开，但菜单正在关闭。但是在网站的新页面上必须打开活动菜单！我认为有必要找到活动菜单，然后使用 ajax 代码删除 style="display:none" 。但我有一些困难。

我试图在 JSFiddle 上以简单的方式实现我所拥有的：Example

HTML：

<ul id="menu">
    <li> <a href="javascript:void(0);" class="clickme">Click me 1</a>

        <ul style="display:none">
            <li><a href="#">Dropdown link</a>

            </li>
            <li><a href="#">Dropdown link</a>

            </li>
        </ul>
        <li> <a href="javascript:void(0);" class="clickme">Click me 2</a>

            <ul style="display:none">
                <li><a href="#">Dropdown link</a>

                </li>
                <li><a href="#">Dropdown link</a>

                </li>
            </ul>
        </li>
</ul>

AJAX：

$(document).ready(function () {

    $('#menu li > a').click(function (e) {

        if ($(this).next('ul').length > 0) {

            e.preventDefault();

            var subNav = $(this).next('ul');

            if (subNav.is(':visible')) {
                subNav.slideUp('normal')
                $(this).removeClass("selected");
            } else {
                $('#menu ul:visible').slideUp('normal');
                subNav.slideDown('normal');
                $("a.selected").removeClass("selected");
                $(this).addClass("selected");
            }
        }
    });
});

感谢您的帮助！

【问题讨论】：

如果您打开一个新页面，甚至不确定这是否可行。很有趣。
我很困惑。您在此处发布的代码不是 Ajax，它只是 JQuery。您是使用 Ajax 还是使用普通超链接将用户带到所选页面？另外，您还可以包含您的 CSS 吗？我看到你删除了 selected 类，但我没有看到这方面的 CSS。

标签： javascript jquery html css ajax

【解决方案1】：

给你的下拉链接href一个额外的标签参数

<a class="dropdown-class-name" href="http://www.yourpage/#dropdown-link-name">Dropdown link</a>

还要给你的下拉链接一个唯一的类名。
也给下拉列表 ul 一个唯一的类名

<ul class="sub-level-1" style="display:none">
当新页面加载时，检查url是否包含文本#dropdown-link-name，如果包含，将下拉元素的样式设置为display:block
```
$(document).ready(function () {
    if (window.location.href.indexOf("#dropdown-link-name") > -1) {
        $('.dropdown-class-name').closest(".sub-level-1").css("display","block");
    }
});
```
通过这种方式，您必须为每个子菜单块创建一个新的 jquery 就绪函数。我不能给你一个 jsfiddle，但我在本地测试过，它可以工作。

【讨论】：

非常感谢，但这段代码会打开所有菜单，但我只需要保持打开一个活动的菜单
哦，非常感谢。你为我节省了很多时间。我非常感谢您的帮助！ :)

【解决方案2】：

你可以这样做：

从 URL 中找到当前路径，并基于此删除 display:none 属性。

var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);

$("#menu li a").each(function () {
    var href = $(this).attr('href');
    if (path.substring(0, href.length) === href) {
        $(this).closest('li').css('display:none');
    }
});

注意：未经测试

【讨论】：

【解决方案3】：

你应该有某种脚本来呈现这个菜单，不是吗？我会考虑一个解决方案，其中您的菜单呈现脚本将为您所在的菜单项的所有父项分配诸如“打开”之类的类，并为该项目本身分配“活动”类。然后你可以通过纯 css 隐藏/显示它，无需任何 js。如果您确实不允许用户通过链接访问，这也适用。

【讨论】：