随机单击时跨度崩溃不起作用

Question

这是我的代码：-

<div class="panel-heading" role="tab" id="headingOne${count}" data-toggle="collapse" data-parent="#accordion" href="#collapseOne${count}" aria-expanded="true" aria-controls="collapseOne${count}">
                    <h4 class="row panel-title">
                        <span class="col-md-5 col-lg-5 accordian-filegroupname">${fileGrp}</span> 
                        <span class="col-md-3 col-lg-3 accordian-filegroupeye">( Eye: ${getEyeTypeFromFileName(fileGrp)} )</span>
                        <span class="col-md-3 col-lg-3 accordian-filegroupeye">( Uploaded On: ${parentUploadedOn} )</span>
                        <span class="col-md-1 col-lg-1 accordian-filegroupicon"><i class="accordion_icon fa fa-plus"></i></span>
                    </h4>
                </div>

以下是jQuery脚本：-

$('.panel-heading').click(function () {
       $(this).find('i').toggleClass('fa-plus fa-minus')
           .closest('panel').siblings('panel')
           .find('i')
           .removeClass('fa-minus').addClass('fa-plus');
   });

当用户单击 UI 上的加号进行折叠时，它工作正常，但是当用户随机快速单击它时，有时加号变为减号，反之亦然。 我想在折叠时保留减号，在不折叠时保留加号，随机快速点击它

Answer 1

你需要让它变得简单：

$('.panel-heading').click(function () {
    $('i').removeClass('fa-minus').addClass('fa-plus');
    $(this).find('i').toggleClass('fa-minus');
});

函数的第一行将删除fa-plus类并将fa-minus添加到所有<i>，然后， 第 2 行将添加 fa-minus 类到只有点击的 div 的孩子 <i>。

请试试这个。这应该可以。