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

小提琴