維護子菜單可見

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。