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的新类。在设置之前，请为已经具有所选类的任何打开的子菜单调用close函数。

看起来像这样：

$(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属性，但您仍然需要该类来识别打开的子菜单，以便您可以应用效果

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

1 个答案: