javascript - 当我用 Javascript 向下滚动结果时，我的代码出了什么问题

Question

如下面的演示，当我拖动鼠标到 Week我无法滚动查看最终<li>在 HTML block 中，这可能也不会顺利运行。我不知道这里出了什么问题，请查看一下并让我知道如何修改。

Demo

<小时/>

HTML:

<div class="yearly">2014
<div class="container">
    <ul class="ca-menu"></ul>
</div>
</div>

Javascript:

$(document).ready(function () {
$(".yearly").mouseover(function () {
    var num_month = 48;
    var current_year = 2014;
    for (i = num_month; i >= 1; i--) {
        $(".ca-menu").after("<li class='weekly'><a href='/Lists/ChartIndex.aspx?Week=" + i + "&Year=" + current_year + "'>Week " + i + "</a></li>");
    }
})
    .mouseout(function () {
    $(".weekly").hide();
});

});

Answer 1

您无法滚动到底部的原因是当您将鼠标悬停在 <li> 上时链接时，鼠标悬停事件被重复调用。试试这个

$(document).ready(function(){
            $(".yearly").hover(function () {
        console.log('yahh');
        var num_month = 48;
        var current_year = 2014;
        for (i = num_month; i >= 1; i--) {
            $(".ca-menu").after("<li class='weekly'><a href='/Lists/ChartIndex.aspx?Week=" + i + "&Year=" + current_year + "'>Week " + i + "</a></li>");
        }
    },
       function () {
        $(".weekly").hide();
    });

        });