维护子菜单可见

Question

我试图显示一个子菜单，当鼠标在父李上，但是当我将鼠标移动到它消失的子菜单，这对我来说没有意义。

我正在使用jquery来这样做。

这里是我的代码（缩短）：

function showSub(id) { 
 
    $('#' + id).slideDown('fast'); 
 
} 
 

 
function hideSub(id) { 
 
    $('#' + id).slideUp('fast'); 
 
}

.menu li { 
 
    display: inline-block; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .menu li a { 
 
    text-decoration: none; 
 
    color: #9B9A98; 
 
    font-weight: 700; 
 
    font-size: 13px; 
 
    } 
 
    .menu li a span { 
 
    line-height: 100px; 
 
    display: block; 
 
    padding: 0 15px; 
 
    } 
 
    .menu li ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: rgba(3, 3, 3, 0.85); 
 
    display: none; 
 
    position: absolute; 
 
    } 
 
    .menu li ul li { 
 
    margin: 0; 
 
    padding: 10px 15px; 
 
    list-style: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li><a href="index.php"><span>HOME</span></a> 
 
    </li> 
 
    <li onmouseover="showSub('atelier')" onmouseout="hideSub('atelier')"> 
 
    <a href="index.php?p=atelier"><span>ATELIER</span></a> 
 
    <ul id="atelier"> 
 
     <li><a href="index.php?p=quem_somos"><span>QUEM SOMOS</span></a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="index.php?p=portfolio"><span>PORTFOLIO</span></a> 
 
    </li> 
 
</ul>

我不明白。由于子菜单位于li之内，因此在鼠标悬停时子菜单应保持可见状态。

有什么我在这里做错了吗？

Answer 1

使用这个jQuery代码片段。

$(document).ready(function() { 
    $(".menu li").hover(
     function() { 
      $(this).children("#atelier").slideDown(); 
     }, 
     function() { 
      $(this).children("#atelier").slideUp(); 
     } 
    ); 
}); 

在这里看到： https://jsfiddle.net/t884g25b/

Answer 2

我宁愿这样做纯粹与CSS。

CSS

#atelier { 
    display:none; 
} 
.menu > li:hover #atelier{ 
    display:block; 
} 

无需JS。 HTML保持不变。 Fiddle Here.

如果你想要得到的动画，你可能会想尝试像this OR this。

附注 -更好的做法是不是在您的HTML中有事件处理程序信息。要绑定事件，可以使用诸如addEventListener()（Modern Browsers）或attachEvent()（某些旧IE版本）的方法。

使用jQuery，您变成浏览器不可知的，并让jQuery在内部处理所有浏览器兼容性。所以你可以做..

$("YOUR_SELECTOR_HERE").on("EVENT_TYPE", function(event){ 
    //your event handler with the "event" details. 
}) 

.on可以使用不同的方式。 Here。