Question

我正在开发一个左右箭头扩展LI的导航系统。

<a href="#" class="icon-arrow-left active"></a>
     <ul>
        <li class="contracted"><a href="#">1</a></li>
        <li class="expanded"><a href="#">2</a></li>
        <li class="activeLesson"><a href="#">3</a></li>
        <li class="expanded"><a href="#">4</a></li>
        <li class="contracted"><a href="#">5</a></li>
    </ul>
<a href="#" class="icon icon-arrow-right active"></a>

当拳头li''展开'时，'icon-arrow-left'应为'无效'，当最后一个li'展开'时，图标图标 - 箭头 - 右'应处于无效状态。

我试图使用此功能

 if ($('li:first-child').hasClass('activeLesson')) {
        $('.icon-arrow-left').attr('class','inactive')
        }

这是jsFiddle

Answer 1

不要使用attr('class','inactive')，这将完全消灭您拥有的所有课程。

您应该使用toggle class method

if ($('li:first-child').hasClass('expanded')) {
        $('.icon-arrow-left').toggleClass('active inactive');
}

如果该类处于活动状态，则它将使用非活动状态，如果该类处于非活动状态，则它将使用活动类。

Answer 2

使用addClass("active") / removeClass("inactive")。如果您使用.attr进行设置，则会删除所有类。

hasClass jQuery不起作用

2 个答案: