链接到新页面时保持父级子项打开 [英] Keep parent with children open when linking to new page
问题描述
我有一个垂直的手风琴菜单，在悬停时打开，保持打开，当其他项目悬停时关闭。我从@JDandChips获得这个工作很大的帮助。
I have a vertical accordion menu that opens on hover, stays open and closes when other items are hovered. I had great help from @JDandChips on getting this working.
现在我真正需要的是能够选择一个特定的菜单项（虚拟旅游）打开嵌套列表。然后，当浏览这个嵌套列表中的每个链接时，它会加载一个新页面（这是它的Joomla！），并且嵌套列表仅在这些页面上保持打开。然后当另一个链接被点击它再次关闭。这是我的工作...
What I really need now though is to be able to select a particular menu item (virtual-tour) to open the nested list. Then when navigating through each link in this nested list it loads a new page (already does this as it's Joomla!) and the nested list stays open on these pages only. Then when another link is clicked it closed again. Here's what I have working...
<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 ?>;
}
推荐答案
单击菜单中的项，该菜单项将加载类活动。
You may notice that after you click an item in the menu, that menu item will load with the class "active". You can then target this menu item via active and show the item.
以下是代码：
if($('.active.parent > ul').length > 0)
{
$('.active.parent > ul').show();
}
第一行只是检查是否有活动元素，否则我们可能会得到脚本错误。在bracers中，代码只显示元素。
The first line just checks that there is an active element, otherwise we might get a script error. Within the bracers the code simply shows the element. Give this a go and let me know how you get on.
此外，在这种情况下使用开发人员工具栏（F12）是一个好主意，因此您可以监视DOM并检查活动类。
Also, it's a good idea to utilize your developer toolbar (F12) in cases like this, so you can monitor the DOM and spot things like the active class.
这篇关于链接到新页面时保持父级子项打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
