Jquery。爲什麼這不起作用？

Question

這是HTML代碼：

    <a class="cat" href="#">category</a> 
       <span class="kiti" style="position:absolute; padding:5px; margin-left:-18px; display:none; background-color:#000"> 
        <a href="#">sub1</a> 
        <br /><a href="#">sub2</a> 
        </span> 

而且functions.js

$(document).ready(function() {  
    $(".cat").hover(function() { 
    $(this).next().slideDown(300); 
    }); 
    $(".cat").mouseout(function() { 
    $('.kiti').slideUp(300); 
    }); 
}); 

如何讓，它將允許按SUB1和SUB2，因爲當我嘗試它，子類皮革。 謝謝。

Answer 1

嘗試：

$(document).ready(function() {  
    $(".cat").hover(function() { 
    $(this).next().stop().slideDown(300); 
    }, function() { 
    $(this).next().stop().slideUp(300); 
    }); 
}); 

hover()需要兩個回調：第一個是用於當鼠標在元件（ S）。第二個是當鼠標離開時。

請注意，您還有一些缺少的分號和其他語法問題。

另外，在這種情況下建議使用stop()動畫，否則快速觸發事件可能無法獲得理想的效果。

最後，我並不完全確信slideUp和slideDown將按照行內所需的行內元素（即<span>而不是塊級元素）行事。想想看，這可能是你問題的根源。從slideUp()：

隱藏所有匹配的元素，通過調整 自己的身高和完成後可選地觸發一個回調 。

內聯元素不響應高度調整。所以你應該使用<div>或者製作那個特定的<span>display: block。

Answer 2

您沒有正確應用hover。它有兩個函數作爲參數（mouseover和mouseout）。嘗試：

$(document).ready(function() { 
    $(".cat").hover(function() { 
     $(this).next().slideDown(300); 
    }, function() { 
     $('.kiti').slideUp(300);  
    }); 
}); 

或平原鼠標懸停/鼠標移開當量：

$(document).ready(function() { 
    $(".cat").mouseover(function() { 
     $(this).next().slideDown(300); 
    }).mouseout(function() { 
     $('.kiti').slideUp(300); 
    }); 
});