滑动切换 在 UL Li 上

slide toggle on ul li

本文关键字：UL Li      更新时间：2023-09-26

我在控制我的滑动切换时遇到问题，我想显示我悬停的年份中的月份，但是当我将鼠标悬停在 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");
});

你需要使选择器更具体一点（找到months是悬停li的直接后代的子项）。此外，您有无效的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>

小提琴

相关文章：