Question

我面临着jQuery的一个小问题。我的导航栏选择了蓝色的链接（“活动”属性），我可以添加属性，但是当我点击另一个链接时，我无法正确删除最后一个链接。我写了一些代码，如果有人能帮助我，我会感激不尽。

// jQuery

   jQuery('.navbar-nav').on('click', ' li > a.ajaxify', function (e) {
        e.preventDefault();
        App.scrollTop();

        var url = $(this).attr("href");
        var menuContainer = jQuery('.navbar-nav');
        var pageContent = $('.page-content');
        var pageContentBody = $('.page-content .page-content-body');

        menuContainer.children('li.active').removeClass('active');
        menuContainer.children('arrow.open').removeClass('open');
        menuContainer.children('arrow.open').removeClass('open');

        $(this).parents('li').each(function () {
            $(this).addClass('active');
            $(this).children('a > span.arrow').addClass('open');
        });
        $(this).parents('li').addClass('active');

        App.blockUI(pageContent, false);

        ...
    });

// HTML

<li class="active">
    <a href="" class="ajaxify" id="startLoadTag">
        <i class="fa fa-home"></i> Link
    </a>
</li>
<li class="">
    <a href="" class="ajaxify">
        <i class="fa fa-puzzle-piece"></i> Link
    </a>
</li>
<li class="">
    <a data-toggle="dropdown" data-hover="dropdown" data-close-others="true" class="dropdown-toggle" href="">
        <i class="fa fa-quote-right"></i>
        Evento
        <i class="fa fa-angle-down"></i>
    </a>
    <ul class="dropdown-menu">
        <li>
            <a href="" class="ajaxify"><i class="fa fa-building"></i> Link</a>
        </li>
        <li>
            <a href="" class="ajaxify"><i class="fa fa-lightbulb-o"></i> Link</a>
        </li>
        <li>
            <a href="" class="ajaxify"><i class="fa fa-suitcase"></i> Link</a>
        </li>
        <li>
            <a href="" class="ajaxify"><i class="fa fa-group"></i> Link</a>
        </li>
        <li>
            <a href="" class="ajaxify"><i class="fa fa-comments"></i> Link</a>
        </li>
    </ul>
</li>

Answer 1

在此之前

$(this).parents('li').addClass('active');

您需要为每个“活动”类运行.each函数并删除该类。也许是这样的

 $('li').each(function() { 
if($(this).hasClass('active') { 
   $(this).removeClass('active'); 
}); 
}

Answer 2

问题解决了，只是做了一切，一切正常。谢谢大家。

menuContainer.children('li.active').removeClass('active');
menuContainer.children('arrow.open').removeClass('open');

$('ul').each(function() {
    $(this).children('li').each(function() {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        }
    });
});

$(this).parents('li').addClass('active');

使用jQuery删除属性

2 个答案: