Мышь Выбирая активный класс по определенным вопросам

Question

У меня есть форма вопросов, большинство ответов типа YES или NO. У меня есть все вопросы, и ДА НЕТ переключаться, работая над ними. По какой-то причине, хотя, когда я добираюсь до вопроса 3 и выбираю выбор, он добавит активный класс к этой кнопке, но если я щелкнув в другом месте на экране, он удалит этот активный класс. Не уверен, почему он это делает. Вопрос 3 также является первым вопросом с дополнительным вопросом, который появляется, если пользователь выбирает ДА.

HTML:

<div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2"> 
       <p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p> 
       <input name="radio" type='hidden' value="Yes"/> 
       <div class="btn-group btn-toggle"> 
        <button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button> 
        <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button> 
       </div> 
      </div> 

      <div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-3"> 
       <p><strong>3.</strong> HAVE YOU HAD PAIN IN THE AREA OF THE SHINGLES RASH FOR AT LEAST THE LAST 3 MONTHS?</p> 
       <input name="radio" type='hidden' value="Yes"/> 
       <div class="btn-group" data-toggle="buttons"> 
        <button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="yes">Yes</button> 
        <button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="no">No</button> 

        <div class="row"> 
         <div class="col-xs-12 col-md-6 col-md-offset-2 study-question sub-question"> 
          <p><strong>3A.</strong> IF IT HAS NOT YET BEEN 3 MONTHS, HOW LONG WOULD YOU ESTIMATE THIS PAIN HAS BEEN ONGOING?</p> 
          <input name="radio" type='hidden' value="Yes"/> 
          <input type="email" class="form-control study-form-control" id="how-many-year" placeholder="How long?"> 
         </div> 
        </div> 
       </div> 
      </div> 

JS:

$('.yes-no').click(function(){ 
    $(this).closest('div').find('.yes-no').each(function(){ 
     $(this).removeClass('active'); 
    }); 

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


    $(this).val()=='yes'?$(this).closest('div').find('.sub-question').show():$(this).closest('div').find('.sub-question').hide(); 

}); 

Answer 1

В HTML - Вы забыли добавить класс btn-toggle к DIV родитель второй кнопки группы:

jsBin demo

JQuery:

$('.yes-no').click(function(){ 

    $(this).addClass('active').siblings().removeClass('active'); 
    $(this).closest('div').find('.sub-question').toggle(this.value==='yes'); 

});