javascript - hasClass jQuery 不工作

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' 应为 'inactive'，当最后 li 'expanded' 时，'icon icon-arrow-right' 应为非事件状态。

我尝试使用这个但不起作用

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

这里是jsFiddle

Answer 1

不要使用attr('class','inactive')，这会完全清除您拥有的所有类。

You should use toggle class method

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

如果该类具有事件状态，则使用非事件状态，如果该类具有非事件状态，则使用事件状态。