Javascript 悬停样式应在动态加载多级菜单时保持单击状态

我使用下面的脚本创建了带有大量定制的多级megamenu

下面是相同的JSFIDLE链接

/* ######### Drop Down DIVs CSS ######### */


.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: transparent;
border:none;
border-left: 2px solid #ffffff;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #09519b;
background-color: #d6d6d6;
text-decoration: none;
padding: 8px 0px 8px 13px;

}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover{
font-weight:bold;
background-color:#bfbfbf;
}

/* ######### Neutral CSS  ######### */

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

/* ######### Marker List Vertical Menu ######### */

.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
/*position: relative;*/ /*Preserve this for "right" arrow images (added by script) to be positioned correctly*/
position: absolute;
top:136px;

}

.markermenu ul{
list-style-type: none;
margin: 56px 0 0 0;
padding: 0;
/*border: 1px solid #9A9A9A;*/
}

.markermenu ul li a{
background: #d6d6d6; /*light gray background*/
color: #09519b !important;
display: block;
width: auto;
padding: 8px 0;
padding-left: 13px;
text-decoration: none;
/*border-bottom: 1px solid #B5B5B5;*/
}

.topRound{
    border-radius:5px 5px 0 0;
}

.bottomRound{
    border-radius:0 0 5px 5px;
}

* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}

.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}

.markermenu ul li a:hover, .markermenu ul li a.selected{
 font-weight:bold;
 background-color:#bfbfbf;
}


/* ######### Customized Drop Down ULs CSS (inherits from ddlevelsmenu-base.css) ######### */

.blackwhite li a{
background: white;
}

.blackwhite li a:hover{
background: black;
color: white;
}

ul.miniBlocks{width:732px !important; background:#d6d6d6;}
ul.miniBlocks1{width:366px !important; background:#d6d6d6;}
.miniBlocks li{float:left !important;}
.miniBlocks1 li{float:left !important;}

.mattblackmenu a.selected, .ddsubmenustyle li.selected > a {
background: #bfbfbf; /*background of tab with "selected" class assigned to its LI */
color: #09519B;
font-weight:bold;
}

下面是同样的CSS代码

/* ######### Drop Down DIVs CSS ######### */


.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: transparent;
border:none;
border-left: 2px solid #ffffff;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #09519b;
background-color: #d6d6d6;
text-decoration: none;
padding: 8px 0px 8px 13px;

}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover{
font-weight:bold;
background-color:#bfbfbf;
}

/* ######### Neutral CSS  ######### */

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

/* ######### Marker List Vertical Menu ######### */

.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
/*position: relative;*/ /*Preserve this for "right" arrow images (added by script) to be positioned correctly*/
position: absolute;
top:136px;

}

.markermenu ul{
list-style-type: none;
margin: 56px 0 0 0;
padding: 0;
/*border: 1px solid #9A9A9A;*/
}

.markermenu ul li a{
background: #d6d6d6; /*light gray background*/
color: #09519b !important;
display: block;
width: auto;
padding: 8px 0;
padding-left: 13px;
text-decoration: none;
/*border-bottom: 1px solid #B5B5B5;*/
}

.topRound{
    border-radius:5px 5px 0 0;
}

.bottomRound{
    border-radius:0 0 5px 5px;
}

* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}

.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}

.markermenu ul li a:hover, .markermenu ul li a.selected{
 font-weight:bold;
 background-color:#bfbfbf;
}


/* ######### Customized Drop Down ULs CSS (inherits from ddlevelsmenu-base.css) ######### */

.blackwhite li a{
background: white;
}

.blackwhite li a:hover{
background: black;
color: white;
}

ul.miniBlocks{width:732px !important; background:#d6d6d6;}
ul.miniBlocks1{width:366px !important; background:#d6d6d6;}
.miniBlocks li{float:left !important;}
.miniBlocks1 li{float:left !important;}

.mattblackmenu a.selected, .ddsubmenustyle li.selected > a {
background: #bfbfbf; /*background of tab with "selected" class assigned to its LI */
color: #09519B;
font-weight:bold;
}

脚本和css工作正常。当您移动到导航项目时，您可以看到鼠标悬停在背景颜色较深且字体粗体的选择上

现在，这个菜单动态地来自一个js/jsp包含文件

我需要的是，当用户想要打开一个页面时，单击它，悬停样式应该保持不变

比如说,

如果您将鼠标悬停在JavaScript参考>项目文件夹5b>项目文件夹5.2b>子项目5.2.1b上，并且当您想要打开子项目5.2.1b时，在打开与子项目5.2.1b相关的页面时，再次单击该子项目，当用户再次希望悬停并打开另一页或查看他在哪一页时，悬停样式应保持在单击状态，以便用户知道他在子项5.2.1b页上

---

任何其他方式都是受欢迎的，但应该适用于我的动态场景。

如果这是针对单页应用程序的，那么只需为活动项提供一个可以设置为活动项样式的

active

类即可

否则，您将需要在服务器端执行此操作。您的CMS/服务器端应用程序需要为当前活动菜单项提供一个class

active

.ddsubmenustyle li a:hover,
.ddsubmenustyle li a.active {
    font-weight:bold;
    background-color:#bfbfbf;
}

---

不，有多个页面，单击每个页面，左侧菜单（动态出现）将打开该页面，因此单击菜单项后，悬停效果将保持不变，页面也将加载。您可以在问题中提供的小提琴链接上尝试您的逻辑。谢谢@MarkSimpson@NathanLee然后正如我所说的，您应该在服务器端应用这个。任何基本的内容管理系统都可以为您做到这一点。如果您编写了自己的CMS，那么您可以添加必要的代码，将类添加到活动菜单项中。这是最好的办法。还有一种选择。。将活动菜单项存储在cookie/localstorage中，并在每次加载页面时检索它，但这不是一个好主意。我的后端基于XML/JSP，但我相信我无法对其进行任何更改，但这只能通过javascript实现吗？-@MarkSimpsonI不是JS程序员，所以我不能帮你编写代码。然而，这个想法基本上是当有人点击菜单项时，你会将该菜单项的id保存在cookie中。当新页面打开时，javascript将读取该cookie，然后在菜单中找到该项并向其添加一个类，例如：“active”。这将由CSS设置样式，以匹配悬停样式。但是，您必须为每个菜单项指定一个唯一的ID或类，例如：

。这样，javascript就可以识别每个菜单项。您需要悬停选定的菜单路径才能悬停，还是只悬停选定的菜单项？两者都可以。悬停已经开始工作了，但是onclick应该也可以在新页面打开的地方工作-@MohsenShall-down-vote，但至少有一个原因。