Question

我有一种下拉菜单。但是当我点击一些子菜单链接时，我的网站的新页面正在打开，但菜单正在关闭。但是在网站的新页面上必须打开活动菜单！我认为有必要找到活动菜单，然后使用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");
            }
        }
    });
});

感谢您的帮助！

Answer 1

为您的下拉链接提供一个额外的标签参数

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

同时为您的dropdownlink提供一个唯一的班级名称。
给下拉列表ul一个唯一的类名

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

Answer 2

您可以这样做：

从网址中查找当前路径，并根据此信息删除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');
    }
});

注意：未经测试

Answer 3

你应该有某种脚本来呈现这个菜单，不是吗？我会考虑一个解决方案，在这个解决方案中，您的菜单渲染脚本将分配类似＆＃34; open＆＃34;给你所在菜单项的所有父母，并且＆＃34;活跃＆＃34;到这个项目本身。然后你可以通过纯css隐藏/显示它，没有任何js。如果您不是真的允许用户通过链接，这也适用。

在网站的新页面上打开jquery下拉菜单

3 个答案: