保持jquery下拉菜单在网站的新页面上打开 [英] Keep jquery dropdown menu open on the new page of web site

问题描述

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

我尝试在JSFiddle上以简单的方式实现： 示例 p>

 < ul id =menu> 
< li> < a href =javascript：void（0）; class =clickme>点击我1< / a> 
 
< ul style =display：none> 
< li>< a href =＃>下拉式连结< / a> 
 
< / li> 
< li>< a href =＃>下拉式连结< / a> 
 
< / li> 
< / ul> 
< li> < a href =javascript：void（0）; class =clickme>点击我2< / a> 
 
< ul style =display：none> 
< li>< a href =＃>下拉式连结< / a> 
 
< / li> 
< li>< a href =＃>下拉式连结< / a> 
 
< / li> 
< / ul> 
< / li> 
< / ul> 
  

AJAX：

（函数（e）{（））{pre $ <'code> $（document）.ready（函数（）{

$（'＃menu li> a'）。 （$（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）;
}
}
}）;
}）;

感谢您的帮助！

解决方案

1. 为您的下拉链接href添加一个额外的hashtag参数
   
   

   < ; a class =dropdown-class-namehref =http：//www.yourpage/#dropdown-link-name>下拉链接< / a>

   
   
   

   同样给你的下拉链接一个唯一的类名称。

b
$ b

< ul class =sub-level-1style =display：none>

li>


2. 加载新页面时，请检查url是否包含文本＃dropdown-link-name，如果是，请将下拉元素的样式设置为显示：block < （＃下拉菜单）。（b）
   
   

     $（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，但是我在本地测试了它并且它可以工作。

I have a kind of drop down menu. But when I click some submenu link, the new page of my web site is opening, but the menu is closing. But on the new page of the web-site active menu must be open! I think that it is necessary to find active menu, and after that remove style="display:none" using the ajax code. But I have some difficulties with it.

I tried to implement what I have in simple way on 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");
            }
        }
    });
});

Thanks for any help!

解决方案

1. Give your dropdown link href an extra hashtag parameter

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

   Also give your dropdownlink a unique class name.

2. Give the dropdown ul also a unique class name

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

3. 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");
       }
   });
   

   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屋！