javascript - 在 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");
    });