Question

我有一个垂直的手风琴菜单，在悬停时打开，在其他物品悬停时保持打开和关闭。我得到了@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 ?>;
}

Answer 1

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

以下是代码：

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

第一行只检查是否存在活动元素，否则我们可能会收到脚本错误。在括号内，代码只显示元素。放手一搏让我知道你是怎么过的。

此外，在这种情况下使用开发人员工具栏（F12）是个好主意，因此您可以监控DOM并发现活动类等内容。

链接到新页面时，请保持父母与孩子一起打开

1 个答案: