打开网站的另一页后，保持jQuery下拉菜单处于打开状态 [英] Keep jquery dropdown menu open after opening another page of website

问题描述

我有一个通过鼠标单击的下拉菜单.当我单击某个下拉链接"时，我的网站的另一页正在打开，但菜单已关闭.我需要保持打开状态，并且实际的下拉链接"应以粗体显示.

I have a dropdown menu by mouse click. When I click on the some "dropdown link", another page of my website is opening but the menu is closed. I need to keep it open and actual "dropdown link" should be shown in bold.

以下是我所拥有的示例 http://jsfiddle.net/dmitry313/dfgjx22j/1 /

Here is an example of what I have http://jsfiddle.net/dmitry313/dfgjx22j/1/

HTML:

<a href="javascript:void(0);" id="click1" class="clickme">Click me 1</a>
<ul id="menu_list" style="display:none">
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
</ul>
<br><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>

在这里，我重定向到网站的另一个页面:

Here I have a redirect to another page of website:

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

AJAX:

$(document).ready(function(){
    var toggleClick = function(){
        var divObj = $(this).next();
        var nstyle = divObj.css("display");

        if(nstyle == "none"){
            divObj.slideDown(false,function(){
                $("html").bind("click",function(){
                    $("html").unbind("click");
                });
            });
        }
        else {
            divObj.slideUp(true,function(){
                $("html").bind("click",function(){
                    $("html").unbind("click");
                });
            });
        }
    };
    $(".clickme").click(toggleClick);
});

感谢您的帮助！

推荐答案

为您的外部下拉链接提供href额外的标签 parameter

Give your external dropdown link href an extra hashtag parameter

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

还要给您的下拉链接一个唯一的ID

Also give your dropdownlink a unique id

为下拉列表ul提供唯一的ID名称

Give the dropdown ul also a unique id name

<ul id="sub-level-1" style="display:none">

加载新页面时，检查url是否包含文本#dropdown-link-name，如果包含，则将dropdown元素的样式设置为display:block

When the new page loads, check if the url contains the text #dropdown-link-name, and if it does, set the style of the dropdown element to 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 ready函数.我不能给你一个jsfiddle，但是我在本地进行了测试，并且可以正常工作.

In this way you have to make a new jquery ready function for every submenu block. I can't give you a jsfiddle, but I tested this locally and it works.

这篇关于打开网站的另一页后，保持jQuery下拉菜单处于打开状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！