在ul li上滑动切换

Question

我在控制我的slidetoggle时遇到问题，我想显示我徘徊的年份中的月份，但是当我将鼠标悬停在2015年时，2014年的月份也是如此，我该怎么做。

样品小提琴

HTML：

<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>

CSS：

.months { display: none; }

脚本：

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

Answer 1

您需要使选择器更加具体（找到悬停li直接后代的孩子months ）。 另外，您还有无效的html（ ul不能直接嵌套在另一个ul ）。

尝试：

//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>

小提琴