鼠标单击移除某些问题的活动类

Question

我有一种形式的问题，大多数只是是或没有类型的答复。我把所有的问题都解决了，“是”和“不”也在起作用。但是，由于某种原因，当我来到问题3并选择一个选项时，它会将active类添加到该按钮中，但是如果我单击屏幕上的其他任何位置，它就会删除该活动类。不知道它为什么要这么做。问题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>

联署材料：

    $('.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父组中：

http://jsbin.com/fudomu/1/edit

jQuery：

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

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

});