滑动切换不起作用，错误的类名。

Question

滑动切换不起作用，错误的类名。

3

我创建了一个滑动切换，但它不起作用。通常，如果我将鼠标悬停在年份上，月份将通过滑动切换显示，但现在无法正常工作... 可能是脚本中的类错误。示例 fiddle HTML:

    <div class="smart-archives">

    <ul>
        <a class="year-link" href="http://net/2015">2015</a>: 

        <li><a class="month-link" href="http://.net/2015/01" title="1 post">January</a></li>
        <li><a class="month-link" href="http://.net/2015/02" title="1 post">February</a></li>
        <li><a class="month-link" href="http://.net/2015/03" title="16 posts">March</a></li>
        <li><a class="month-link" href="http://.net/2015/04" title="13 posts">April</a></li>
<li><a class="month-link" href="http://.net/2015/05" title="9 posts">May</a></li>
<li><a class="month-link" href="http://.net/2015/06" title="4 posts">June</a></li>
<li class="empty-month">July</li>
<li class="empty-month">August</li>
<li class="empty-month">September</li>
<li class="empty-month">October</li>
<li class="empty-month">November</li>
<li class="empty-month">December</li>
</ul>

    <ul>
<a class="year-link" href="http://.net/2014">2014</a>:
<li class="empty-month">January</li>
<li><a class="month-link" href="http://.net/2014/02" title="14 posts">February</a></li>
<li><a class="month-link" href="http://.net/2014/03" title="25 posts">March</a></li>
<li><a class="month-link" href="http://.net/2014/04" title="11 posts">April</a></li>
<li><a class="month-link" href="http://.net/2014/05" title="11 posts">May</a></li>
<li><a class="month-link" href="http://.net/2014/06" title="5 posts">June</a></li>
<li><a class="month-link" href="http://.net/2014/07" title="4 posts">July</a></li>
<li><a class="month-link" href="http://.net/2014/08" title="6 posts">August</a></li>
<li><a class="month-link" href="http://.net/2014/09" title="6 posts">September</a></li>
<li><a class="month-link" href="http://.net/2014/10" title="3 posts">October</a></li>
<li><a class="month-link" href="http://.net/2014/11" title="4 posts">November</a></li>
<li><a class="month-link" href="http://.net/2014/12" title="1 post">December</a></li>
</ul>
    </div>

CSS：

ul li { display:none; }
.empty-month { display: none; }

脚本：

$("ul > li").hover(function () {
    $(this).children("ul li").slideToggle("fast");
});

- MIke

2个回答

2

li 是 ul 的旧的有效子元素。

<ul>
    <li><a class="year-link" href="http://thegypsetters.net/2015">2015</a>:</li>
    <li><a class="month-link" href="http://thegypsetters.net/2015/01" title="1 post">January</a>

那么

$("ul > li:has(.year-link)").hover(function () {
    $(this).siblings().slideToggle("fast");
});

并且

ul li {
    display:none;
}
ul li:first-child {
    display: list-item;
}

演示： Fiddle

- Arun P Johny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Guruprasad J Rao · Accepted Answer

当鼠标悬停在 anchor 上时，您应该使用下面的方法切换 sibling 的 li：

演示

$("ul > a").hover(function () {
    $(this).siblings("li").slideToggle("fast");
});

如果你保持hover选项开启，可能会遇到以下问题：

在移动设备上可能无法正常工作

当你从链接中移开鼠标后，将无法单击月份

所以我建议你将功能改为click方式实现，如下示例：

点击这里查看演示

$("ul > a").click(function (e) {
    e.preventDefault();
    $(this).siblings("li").slideToggle("fast");
});