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

Question

我很熟练地使用css，并且几乎不了解JS/JQuery。我已阅读了许多有关使用cookie保存菜单状态或检查所在页面的名称的问题，但我无法弄清楚如何将我在此处使用的菜单提供的JS的snipits集成到此处：http://cssmenumaker.com/menu/slabbed-accordion-menu（非常直向前菜单）

请详细说明或在此菜单中使用相同的变量，因为我的问题已经了解如何/在哪里实现功能来完成保存菜单的状态。

virtical-菜单的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); 

垂直菜单styles.css的

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
margin: 0; 
padding: 0; 
border: 0; 
list-style: none; 
line-height: 1; 
display: block; 
position: relative; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
#cssmenu { 
width: 200px; 
font-family: Helvetica, Arial, sans-serif; 
color: #ffffff; 
} 
#cssmenu ul ul { 
display: none; 
} 
.align-right { 
float: right; 
} 
#cssmenu > ul > li > a { 
padding: 15px 20px; 
border-left: 1px solid #1682ba; 
border-right: 1px solid #1682ba; 
border-top: 1px solid #1682ba; 
cursor: pointer; 
z-index: 2; 
font-size: 14px; 
font-weight: bold; 
text-decoration: none; 
color: #ffffff; 
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); 
background: #36aae7; 
background: -webkit-linear-gradient(#36aae7, #1fa0e4); 
background: -moz-linear-gradient(#36aae7, #1fa0e4); 
background: -o-linear-gradient(#36aae7, #1fa0e4); 
background: -ms-linear-gradient(#36aae7, #1fa0e4); 
background: linear-gradient(#36aae7, #1fa0e4); 
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); 
} 
#cssmenu > ul > li > a:hover, 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li.open > a { 
color: #eeeeee; 
background: #1fa0e4; 
background: -webkit-linear-gradient(#eca336, #1992d1); 
background: -moz-linear-gradient(#eca336, #1992d1); 
background: -o-linear-gradient(#eca336, #1992d1); 
background: -ms-linear-gradient(#eca336, #1992d1); 
background: linear-gradient(#eca336, #1992d1); 
} 
#cssmenu > ul > li.open > a { 
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15); 
border-bottom: 1px solid #1682ba; 
} 
#cssmenu > ul > li:last-child > a, 
#cssmenu > ul > li.last > a { 
    border-bottom: 1px solid #1682ba; 
} 
.holder { 
    width: 0; 
    height: 0; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
.holder::after, 
.holder::before { 
    display: block; 
    position: absolute; 
    content: ""; 
    width: 6px; 
    height: 6px; 
    right: 20px; 
    z-index: 10; 
    -webkit-transform: rotate(-135deg); 
    -moz-transform: rotate(-135deg); 
    -ms-transform: rotate(-135deg); 
    -o-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
} 
.holder::after { 
    top: 17px; 
    border-top: 2px solid #ffffff; 
    border-left: 2px solid #ffffff; 
} 
#cssmenu > ul > li > a:hover > span::after, 
#cssmenu > ul > li.active > a > span::after, 
#cssmenu > ul > li.open > a > span::after { 
    border-color: #eeeeee; 
} 
.holder::before { 
    top: 18px; 
    border-top: 2px solid; 
    border-left: 2px solid; 
    border-top-color: inherit; 
    border-left-color: inherit; 
} 
#cssmenu ul ul li a { 
    cursor: pointer; 
    border-bottom: 1px solid #32373e; 
    border-left: 1px solid #32373e; 
    border-right: 1px solid #32373e; 
    padding: 10px 20px; 
    z-index: 1; 
    text-decoration: none; 
    font-size: 13px; 
    color: #eeeeee; 
    background: #49505a; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
#cssmenu ul ul li:hover > a, 
#cssmenu ul ul li.open > a, 
#cssmenu ul ul li.active > a { 
    background: #424852; 
    color: #ffffff; 
} 
#cssmenu ul ul li:first-child > a { 
    box-shadow: none; 
} 
#cssmenu ul ul ul li:first-child > a { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
#cssmenu ul ul ul li a { 
    padding-left: 30px; 
} 
#cssmenu > ul > li > ul > li:last-child > a, 
#cssmenu > ul > li > ul > li.last > a { 
    border-bottom: 0; 
} 
#cssmenu > ul > li > ul > li.open:last-child > a, 
#cssmenu > ul > li > ul > li.last.open > a { 
    border-bottom: 1px solid #32373e; 
} 
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a { 
    border-bottom: 0; 
} 
#cssmenu ul ul li.has-sub > a::after { 
    display: block; 
    position: absolute; 
    content: ""; 
    width: 5px; 
    height: 5px; 
    right: 20px; 
    z-index: 10; 
    top: 11.5px; 
    border-top: 2px solid #eeeeee; 
    border-left: 2px solid #eeeeee; 
    -webkit-transform: rotate(-135deg); 
    -moz-transform: rotate(-135deg); 
    -ms-transform: rotate(-135deg); 
    -o-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
} 
#cssmenu ul ul li.active > a::after, 
#cssmenu ul ul li.open > a::after, 
#cssmenu ul ul li > a:hover::after { 
    border-color: #ffffff; 
} 

的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> 

Answer 1

好吧，我不打算完全回答你的问题 - 但我会给你一堆工具，你可以用它来回答这个问题：

首先在click处理，得到Xpath to the element.

有一个很好的question and answer here有关如何获取中的XPath在JavaScript。

然后，您必须将xpath关闭保存在某个持久性存储中。 Cookie是本地存储的一种选择。

第二个在页面加载时，您只是读取了您保存的xpath并在正确的元素处重新打开菜单。

由于该代码使用jQuery，因此使用xpath获取实际DOM元素是一件简单的事情。

再次，有一个非常好的question and answer available。

一旦你有了元素，那么你可以简单地调用它的click事件。

第三可能需要。

我没有看代码，看看是否点击嵌套元素将打开外部元素。如果是这样，你还需要打开这些。我会使用jQuery的parent方法回到菜单并打开（点击）元素，直到到达顶部。

如果需要，应该在步骤2获取xpath /元素并在步骤2中实际执行单击之间调用此步骤。

编辑

貌似功能在呼唤“效果基本show” - 你可能要创建一个单独的函数调用，使用简单的显示/隐藏，所以你不要在页面加载动画。