Javascript 链接到新页面时，保持父项和子项处于打开状态

我有一个垂直的手风琴菜单，悬停时打开，其他项目悬停时保持打开和关闭。我从@JDandChips那里得到了很大的帮助

现在我真正需要的是能够选择一个特定的菜单项（虚拟巡更）来打开嵌套列表。然后，当浏览此嵌套列表中的每个链接时，它会加载一个新页面（已经这样做了，因为它是Joomla！），并且嵌套列表仅在这些页面上保持打开状态。然后，当单击另一个链接时，它将再次关闭。这是我的工作

 <script type="text/javascript">
 $(function () {
 $("ul.menu-main > li").hover(function () {

    //Don't do this again if the same menu is hovered
    if (!$(this).hasClass('selected')) {
        //Ensure any open sub-menu is closed.
        $("li.selected").children("ul").stop(true, true).slideUp(1000);
        $("li.selected").removeClass('selected');
        //Open sub-menu
        $(this).addClass('selected');
        $(this).children("ul").slideDown(1000);
    }
 });
 });
 </script>

<nav>

<ul class="menu-main">
<li class="item-108"><a href="#">Home</a></li>
<li class="item-111 deeper parent"><a href="#">History and Restoration</a>
<ul>
<li class="item-125"><a href="#">History</a></li>
<li class="item-126"><a href="#">The Connection</a></li>
<li class="item-127"><a href="#">Previous Residents</a></li>
<li class="item-128"><a href="#">Restoration</a></li>
<li class="item-129"><a href="#">Sidmouth / Heritage Coast</a></li>
</ul>
</li>
<li class="item-112"><a href="#">Wedding Venue</a></li>
<li class="item-113"><a href="#">Hiring Rooms</a>       </li>
<li class="item-114 deeper parent"><a href="#/virtual-tour"     >Virtual Tour</a><ul><li class="item-132"><a href="#/virtual-tour/entrance-hall" >Entrance Hall</a></li>
<li class="item-133"><a href="#/virtual-tour/amyatt-room-one" >Amyatt Room One</a></li>
<li class="item-134"><a href="#/virtual-tour/amyatt-room-two" >Amyatt Room Two</a></li>
<li class="item-135"><a href="#/virtual-tour/board-room" >Board Room</a></li><li class="item-136"><a href="#/virtual-tour/captain-phillips-room" >Captain Phillips Room</a></li>
<li class="item-137"><a href="#/virtual-tour/function-room" >Function Room</a></li>
<li class="item-138"><a href="#/virtual-tour/gordon-langford-room" >Gordon Langford Room</a></li>
<li class="item-139"><a href="#/virtual-tour/hatton-wood-room" >Hatton Wood Room</a></li>
<li class="item-140"><a href="#/virtual-tour/meeting-room" >Meeting Room</a></li>
<li class="item-141"><a href="#/virtual-tour/rw-sampson-room" >RW Sampson Room</a></li>
<li class="item-142"><a href="#/virtual-tour/first-floor-reception-hallway" >First Floor Reception Hallway</a></li></ul></li>
<li class="item-115"><a href="#">Art and Exhibitions</a></li>
<li class="item-116"><a href="#">Learning</a></li>
<li class="item-117 deeper parent"><a href="#">How Can I help</a>
<ul>
<li class="item-130"><a href="#">Friends of Kennaway House</a></li>
<li class="item-131"><a href="#">Volunteer Opportunities</a></li></ul></li>
<li class="item-118"><a href="#">Gallery</a></li>
<li class="item-119"><a href="#">Contact</a></li>
</ul>


</nav><!-- #nav -->

nav {
position:absolute;
top:190px;
left:0;
width:200px;
min-width:200px;
height:900px;
background:transparent;
z-index:9999;
}

#nav-bg {
position:absolute;
top:200px;
left:0;
width:200px;
height:80%;
background:<?php echo $contactscheme ?>;
}

nav:before {
content:'';
position:absolute;
top:-10px;
right:0;
width:0;
border-top:10px solid transparent; /* height of right point */
border-right:200px solid #570C2A;
z-index:2;
}

nav:after {
content:'';
position:absolute;
top:0;
left:135px;
width:50px;
height:500px;
background:transparent;
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
-webkit-box-shadow:<?php echo $boxshadownav ?>;
-moz-box-shadow:<?php echo $boxshadownav ?>;
box-shadow:<?php echo $boxshadownav ?>;
z-index:-1;
}

.menu-main,
.menu-main ul {
max-height:900px;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-size:1.2em;
background:#570C2A;
}

.menu-main li {
line-height:70px;
margin:0;
padding:0;
   }

.menu-main a {
display:block;
color:beige;
text-decoration:none;
    }

.menu-main a:hover, a:focus {
color:darkslategray;
 text-decoration:none;
text-shadow:none;
outline:0 none;
-webkit-transition:250ms linear 0s;
-moz-transition:250ms linear 0s;
-o-transition:250ms linear 0s;
transition:250ms linear 0s;
}

.menu-main a:hover, a:focus {
color:beige;
text-shadow:1px -1px 14px beige;
}

.menu-main ul {
height:auto;
display:none;
}

.menu-main ul li {
font-size:0.6em;
line-height:30px;
}

.menu-main ul a {
background:transparent;
}

li.item-111.parent {
background:#486060;
line-height:22px;
padding:12px 3%;
}

/* -- sub menu styles for History and Restoration  -- */
.item-125, .item-126, .item-127, .item-128, .item-129 {
background:#486060;
}

.item-125 {
border-top:2px dotted <?php echo $listborders ?>;
}

.item-129 {
    border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-112 {
background:#557171;
}

.item-113 {
background:#663366;
}

.item-114 {
background:#86ACA8;
}

.item-115 {
background:#CD7F72;
}

.item-116 {
background:#BD8A16;
}

li.item-117.parent {
background:#C59F92;
line-height:50px;
padding:12px 3%;
}

/* -- sub menu styles for How Can I Help -- */
.item-130, .item-131 {
background:#C59F92;
}

.item-130 {
border-top:2px dotted <?php echo $listborders ?>;
}

.item-131 {
border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-118 {
background:#869175;
}

.item-119 {
background:<?php echo $contactscheme ?>;
}

$（函数（）{
$（“ul.menu-main>li”）。悬停（函数（）{
//如果同一菜单悬停，则不要再次执行此操作
if（！$（this）.hasClass（'selected'））{
//确保所有打开的子菜单均已关闭。
$（“li.selected”）.children（“ul”）.stop（true，true）.slideUp（1000）；
$（“li.selected”）.removeClass（“selected”）；
//打开子菜单
$（this.addClass（'selected'）；
美元。儿童（“ul”）。向下滑动（1000）；
}
});
});
































导航{
位置：绝对位置；
顶部：190px；
左：0；
宽度：200px；
最小宽度：200px；
高度：900px；
背景：透明；
z指数：9999；
}
#导航背景{
位置：绝对位置；
顶部：200px；
左：0；
宽度：200px；
身高：80%；
背景：；
}
导航：以前{
内容：''；
位置：绝对位置；
顶部：-10px；
右：0；
宽度：0；
边框顶部：10px实心透明；/*右点高度*/
右边框：200px实心#570C2A；
z指数：2；
}
导航：之后{
内容：''；
位置：绝对位置；
排名：0；
左：135px；
宽度：50px；
高度：500px；
背景：透明；
-webkit变换：旋转（2deg）；
-moz变换：旋转（2deg）；
-ms变换：旋转（2deg）；
变换：旋转（2deg）；
-网络工具包盒阴影：；
-莫兹盒影：；
盒影：；
z指数：-1；
}
.主菜单，
.菜单主菜单{
最大高度：900px；
保证金：0；
填充：0；
列表样式：无；
文本对齐：居中；
字体大小：1.2米；
背景：#570C2A；
}
.菜单主李{
线高：70px；
保证金：0；
填充：0；
}
.主菜单a{
显示：块；
颜色：米色；
文字装饰：无；
}
.主菜单a:悬停，a:焦点{
颜色：深灰色；
文字装饰：无；
文本阴影：无；
大纲：0无；
-webkit转换：250ms线性0s；
-moz跃迁：250ms线性0s；
-o型过渡：250ms线性0s；
过渡：250ms线性0；
}
.主菜单a:悬停，a:焦点{
颜色：米色；
文本阴影：1px-1px 14px米色；
}
.菜单主菜单{
高度：自动；
显示：无；
}
.菜单主菜单{
字号：0.6em；
线高：30px；
}
.菜单主ul a{
背景：透明；
}
li.item-111.parent{
背景：#486060；
线高：22px；
填充：12px 3%；
}
/*--用于历史记录和恢复的子菜单样式--*/
.第125项、第126项、第127项、第128项、第129项{
背景：#486060；
}
A.项目-125{
边框顶部：2个点；
}
A.项目-129{
边框底部：2个点；
}
/*-->==结束====--*/
A.项目-112{
背景:#557171；
}
.项目-113{
背景#663366；
}
A.项目-114{
背景#86ACA8；
}
A.项目-115{
背景#CD7F72；
}
A.项目-116{
背景#BD8A16；
}
li.item-117.parent{
背景：#C59F92；
线高：50px；
填充：12px 3%；
}
/*--如何提供帮助的子菜单样式--*/
.第130项，.第131项{
背景：#C59F92；
}
A.项目-130{
边框顶部：2个点；
}
A.项目-131{
边框底部：2个点；
}
/*-->==结束====--*/
.项目-118{
背景#869175；
}
A.项目119{
背景：；
}

您可能会注意到，单击菜单中的某个项目后，该菜单项将加载“active”类。然后，您可以通过active将此菜单项作为目标并显示该项

代码如下：

if($('.active.parent > ul').length > 0)
{
    $('.active.parent > ul').show();
}

第一行只是检查是否存在活动元素，否则可能会出现脚本错误。在大括号中，代码仅显示元素。试试看，让我知道你进展如何

---

此外，在这种情况下使用开发者工具栏（F12）也是一个好主意，这样您就可以监视DOM并发现活动类之类的内容。

您可能会注意到，单击菜单中的某个项目后，该菜单项将加载“活动”类。然后，您可以通过active将此菜单项作为目标并显示该项

代码如下：

if($('.active.parent > ul').length > 0)
{
    $('.active.parent > ul').show();
}

第一行只是检查是否存在活动元素，否则可能会出现脚本错误。在大括号中，代码仅显示元素。试试看，让我知道你进展如何

---

另外，在这种情况下使用开发者工具栏（F12）也是一个好主意，这样您就可以监视DOM并发现活动类之类的东西。

如果我正确理解了这个问题，那么当一个节设置为“打开”状态时，您需要设置cookie。当页面加载时，您需要检查cookie以确定需要将哪个部分设置为打开。但是，通过PHP设置菜单的初始状态可能更好。我试图避免使用cookies和PHP，我想知道您是否可以选择url来知道何时保持它打开，或者是否有一种方法将类添加到该菜单，以便在父菜单打开时保持它打开……但是您已经在使用PHP（指向Joomla2.5标记）。。。如果你的目录结构与你的菜单层次结构相匹配，那么你可以通过JS在URL上执行匹配