在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类的兄弟，并删除{{ 1}}

.active

Answer 3

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

首先从所有兄弟姐妹中删除active，无论他们是否已经拥有该课程。