Javascript 在此手风琴菜单上实现保存状态功能_Javascript_Css

Javascript 在此手风琴菜单上实现保存状态功能

javascript css

Javascript 在此手风琴菜单上实现保存状态功能,javascript,css,Javascript,Css,我精通css，对JS/JQuery几乎一无所知。我已经阅读了很多关于用cookies保存菜单状态或检查页面名称的答案，但我不知道如何将JS提供的snippits与我在这里使用的菜单集成：（相当直接的菜单）请详细说明或在此菜单中使用相同的变量，因为我的问题是理解如何/在何处实现功能以完成保存菜单状态 virtic-menu-script.js ( function( $ ) $( document ).ready(function() { $('#cssmenu li.has-sub>a'

我精通css，对JS/JQuery几乎一无所知。我已经阅读了很多关于用cookies保存菜单状态或检查页面名称的答案，但我不知道如何将JS提供的snippits与我在这里使用的菜单集成：（相当直接的菜单）

请详细说明或在此菜单中使用相同的变量，因为我的问题是理解如何/在何处实现功能以完成保存菜单状态

virtic-menu-script.js

( function( $ )
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
    $(this).removeAttr('href');
    var element = $(this).parent('li');
    if (element.hasClass('open')) {
        element.removeClass('open');
        element.find('li').removeClass('open');
        element.find('ul').slideUp();
    }
    else {
        element.addClass('open');
        element.children('ul').slideDown();
        element.siblings('li').children('ul').slideUp();
        element.siblings('li').removeClass('open');
        element.siblings('li').find('li').removeClass('open');
        element.siblings('li').find('ul').slideUp();
    }
});
$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

(function getColor() {
    var r, g, b;
    var textColor = $('#cssmenu').css('color');
    textColor = textColor.slice(4);
    r = textColor.slice(0, textColor.indexOf(','));
    textColor = textColor.slice(textColor.indexOf(' ') + 1);
    g = textColor.slice(0, textColor.indexOf(','));
    textColor = textColor.slice(textColor.indexOf(' ') + 1);
    b = textColor.slice(0, textColor.indexOf(')'));
    var l = rgbToHsl(r, g, b);
    if (l > 0.7) {
        $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
        $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
    }
    else
    {
        $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
        $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
    }
})();

function rgbToHsl(r, g, b) {
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0;
    }
    else {
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return l;
    }
});
} )( jQuery );

index.html

  <div id='cssmenu'>
  <ul>
     <li><a href='#'><span>Home</span></a></li>
     <li class='default has-sub'><a href='#'><span>Products</span></a>
        <ul>
           <li class='active has-sub'><a href='#'><span>Product 1</span></a>
              <ul>
                 <li><a href='#'><span>Sub Product</span></a></li>
                 <li class='last'><a href='#'><span>Sub Product</span></a></li>
              </ul>
           </li>
           <li class='has-sub'><a href='#'><span>Product 2</span></a>
              <ul>
                 <li><a href='#'><span>Sub Product</span></a></li>
                 <li class='last'><a href='#'><span>Sub Product</span></a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href='#'><span>About</span></a></li>
     <li class='last'><a href='#'><span>Contact</span></a></li>
  </ul>
  </div>

好吧，我不打算为您完整地回答这个问题，但我会给您一堆工具，您可以使用这些工具自己回答这个问题：

首先在

上单击

处理程序，获取

关于如何在JavaScript中获取xpath，有一个很好的方法

然后，必须将xpath保存到某个持久性存储中。Cookies是一种选择，本地存储也是如此

第二步在页面加载时，您只需读取保存的xpath，然后在正确的元素处重新打开菜单

因为该代码使用jQuery，所以使用xpath获取实际的DOM元素就很简单了

再一次，有一个非常好的例子

一旦有了元素，就可以简单地调用它的

click

事件

可能需要第三个
我没有查看代码以查看单击嵌套元素是否会打开外部元素。如果是这样的话，你还需要打开它们。我会使用jQuery的
parent
方法返回菜单并打开（单击）元素，直到到达顶部
如果需要，应该在第2步获取xpath/元素和实际执行第2步中的单击之间调用此步骤
编辑

看起来这些函数正在调用“slideUp”——您可能需要创建一个单独的函数来调用，该函数使用简单的show/hide，这样您就不会在页面加载时获得动画。
这要求非常高——下载一些代码，提取并开始搜索它。如果你能问一个更具体的问题，你会做得更好。。。尽管有一个很好的机会，除非代码是为了保存状态而设计的，否则您将发现添加该功能很有挑战性。如果有一个API，你可以调用它来设置状态——哪个段是打开的——你可以添加一个点击处理程序，保存点击的段，然后在页面加载时，你可以使用该API重新打开该段。我知道，我道歉。我只是在帖子中添加了代码以减少工作量。我已经试着自己做了几个小时了，我希望有人能帮助我，但我知道这要求很多。我最后的办法是找到一个不同的菜单，其中包含我想要的功能。
<div id='cssmenu'> <ul> <li><a href='#'>Home</a></li> <li class='default has-sub'><a href='#'>Products</a> <ul> <li class='active has-sub'><a href='#'>Product 1</a> <ul> <li><a href='#'>Sub Product</a></li> <li class='last'><a href='#'>Sub Product</a></li> </ul> </li> <li class='has-sub'><a href='#'>Product 2</a> <ul> <li><a href='#'>Sub Product</a></li> <li class='last'><a href='#'>Sub Product</a></li> </ul> </li> </ul> </li> <li><a href='#'>About</a></li> <li class='last'><a href='#'>Contact</a></li> </ul> </div>