Javascript ul li上的滑动切换

我无法控制我的滑动切换，我想显示一年中我盘旋的月份，但当我在2015年盘旋时，2014年的月份也会出现滑动切换，我该如何做到这一点

样品

HTML:

脚本：

   $(".year").hover(function () {
    $(".months").slideToggle("slow");
});

---

您需要使选择器更加具体（查找悬停

li

的直接后代的子项

months

）。您还有无效的html（

ul

不能直接嵌套在另一个

ul

中）

尝试：

及

及

2015年

一月
二月


2014年

行军
四月

---

您正在使用MOUNT类选择任何元素（意味着所有元素都将滑动），请尝试改用a，以便仅切换悬停年份的子元素

。MOUNT

。

.months { display: none; }

   $(".year").hover(function () {
    $(".months").slideToggle("slow");
});

//Bind event on the `li` that is direct descendant of .year
$(".year > li").hover(function () {
    //Get its direct descendant `.months` and toggle
    $(this).children(".months").stop(true).slideToggle("slow");
});

<ul class="year">
    <li>2015
        <ul class="months">
            <li>Jan</li>
            <li>feb</li>
        </ul>
    </li>
    <li>2014
        <ul class="months">
            <li>march</li>
            <li>april</li>
        </ul>
    </li>
</ul>

$(".year > li > span").hover(function (e) {
    $(this).next().stop(true).slideToggle("slow");
});

<ul class="year">
    <li><span>2015</span>
        <ul class="months">
            <li>Jan</li>
            <li>feb</li>
        </ul>
    </li>
    <li><span>2014</span>
        <ul class="months">
            <li>march</li>
            <li>april</li>
        </ul>
    </li>
</ul>