垂直菜单在悬停时保持打开状态，然后在另一个悬停时关闭

Question

我有一个垂直轮播菜单，其中两个项目打开以显示子菜单。当您将鼠标悬停在菜单上时，它们会再次关闭并返回正常的菜单状态。

我所寻找的是它悬停和保持开放，然后又任何菜单都徘徊时，他们关闭和悬停激活方法...

由于我使用Joomla！以及显示网站等可能会很棘手，但这里是JavaScript，并希望如果需要更多的信息，我可以发布它。谢谢！

<script type="text/javascript"> 
$(function(){ 
    $("ul li.parent").hover(function(){ 
    $(this).children("ul").slideDown(300); 
    $(".contact-details-container p").fadeOut(200); 
    },function(){ 
    $(this).children("ul").stop(true, true).slideUp(300); 
    $(".contact-details-container p").stop(true, true).fadeIn(2000); 
    }); 
}); 
</script> 

HTML

<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 Kennaway 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 current active"><a href="#">Virtual Tour</a></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

在你的悬停功能，你为什么不添加具有属性display:block一个新的类。在设置之前，请为任何已经具有选定类的打开子菜单调用关闭功能。

它可能是这个样子：

$(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(300); 
      $(".contact-details-container p").stop(true, true).fadeIn(2000); 
      $("li.selected").removeClass('selected'); 

      //Open sub-menu 
      $(this).addClass('selected'); 
      $(this).children("ul").slideDown(300); 
      $(".contact-details-container p").fadeOut(200); 
     } 
    }); 
}); 

编辑：由于方式（我觉得）你的菜单是工作，你不应该真正需要display:block属性，但你仍然需要的类确定打开的子菜单，以便您可以应用您的效果。