在jQuery中单击兄弟姐妹时从当前div中删除活动类

Question

当单击任何同级 div 时，我试图从当前 div 中删除 active 类。出于某种原因，这在我的情况下不起作用。

下面是我的 HTML 和 JS

（请注意部分问题已被选中，并且处于活动状态）。

<div class="question">
    <div class="views-field views-field-title views-accordion-header ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-9" aria-controls="ui-id-10" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#q_as-page-4">        
                <span class="field-content">Ex Valde </span>  
            </a>
    </div>  
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-10" aria-labelledby="ui-id-9" role="tabpanel" aria-hidden="true" style="display: none; height: 643.801979064941px;">
        <div class="views-field views-field-body">        
            <div class="field-content">Blandit immitto iusto natu praesent turpis. Dolore duis ideo meus nimis venio vulpes. At autem commodo dignissim interdico mos vel. Eros letalis nobis quia secundum. Decet metuo neque. Causa incassum lobortis pecus quadrum qui tamen.</div>  
        </div>
    </div>  
</div>


<div class="question active">

  <div class="views-field views-field-title views-accordion-header ui-accordion-header ui-state-active ui-corner-all ui-accordion-icons" role="tab" id="ui-id-11" aria-controls="ui-id-12" aria-selected="false" aria-expanded="false" tabindex="-1">
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        <a href="#q_as-page-5">        
            <span class="field-content">Cogo Ibidem Persto Zelus </span>  
        </a>
  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-12" aria-labelledby="ui-id-11" role="tabpanel" aria-hidden="true" style="display: none; height: 643.801979064941px;">
    <div class="views-field views-field-body">        
        <div class="field-content">Eu hendrerit pala ulciscor. Exputo gilvus tincidunt. Exputo nutus obruo paulatim secundum tation torqueo. Defui esse ille iriure lucidus mauris roto.
        </div>  
    </div>
  </div>  
</div>


<div class="question">

  <div class="views-field views-field-title views-accordion-header ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-13" aria-controls="ui-id-14" aria-selected="false" aria-expanded="false" tabindex="-1">
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        <a href="#q_as-page-6">        
            <span class="field-content">Cogo Ibidem Persto Zelus </span>  
        </a>
  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-14" aria-labelledby="ui-id-13" role="tabpanel" aria-hidden="true" style="display: none; height: 643.801979064941px;">
    <div class="views-field views-field-body">        
        <div class="field-content">Eu hendrerit pala ulciscor. Exputo gilvus tincidunt. Exputo nutus obruo paulatim secundum tation torqueo. Defui esse ille iriure lucidus mauris roto.
        </div>  
    </div>
  </div>  
</div>

JS

$('.question .ui-state-default a').on("click", function(e) {

    //$(this).parent().parent().closest('div[class=active]').removeClass("active");;
    //$(this).parent().parent().parent().removeClass("active");
    $(this).parent().parent().addClass("active");
});

Answer 1

试试这个：

    $('.question .ui-state-default a').on("click", function(e) {
      $(".question").removeClass("active");
      $(this).parent().parent().addClass("active");
    });

Answer 2

在树上找到最近的.question，添加.active 类，然后找到具有.question 和.active 类的兄弟姐妹，并删除.active

$('.question .ui-state-default a').on("click", function(e) {
  $(this).closest('.question').addClass('active').siblings('.question.active').removeClass('active')
});

Answer 3

$(this).parent().parent().parent().find(".question").removeClass("active");
$(this).parent().parent().addClass("active");

这会首先从所有兄弟姐妹中删除active，无论它们是否已经拥有该类。