Question

打开它，第一次点击，点击“没有手风琴的第三台收音机”

为什么这会显示所有的手风琴，只有第一次点击？我的代码明确告诉它关闭所有手风琴。我在哪里指示它打开任何东西......

          <div class="radio col-xs-12">
            <label>
              <input type="radio" name="radios" class="track-order-change" id="firstRadio" value="">
              First Radio
            </label>
          </div>

          <div class="col-xs-12 panel-collapse collapse" id="firstAccordion">
            <div>
              First Accordion
            </div>
          </div>

          <div class="radio col-xs-12">
            <label>
              <input type="radio" name="radios" class="track-order-change" id="secondRadio">
              Second Radio
            </label>
          </div>

          <div class="col-xs-12 panel-collapse collapse" id="secondAccordion">
            <div>
              Second Accordion
            </div>
          </div>

          <div class="radio col-xs-12">
            <label>
              <input type="radio" name="radios" class="track-order-change" id="thirdRadio">
              Third Radio with no Accordion
            </label>
          </div>

$('input[name="radios"]').change( function() {

    if ($('#firstRadio').is(":checked")){

        $('#firstAccordion').collapse('show');

    } else {

        $('#firstAccordion').collapse('hide');
    }

    if ($('#secondRadio').is(":checked")){

        $('#secondAccordion').collapse('show');

    } else {

        $('#firstAccordion').collapse('hide');
    }

    if ($('#thirdRadio').is(":checked")){

        $('#firstAccordion').collapse('hide');
        $('#secondAccordion').collapse('hide');
    }

});

Answer 1

调用.collapse('hide')不会在任何上下文中显示元素，无论元素当前是否已折叠或展开。您可以将此与jQuery中.hide()和.show()方法的工作方式进行比较，无论元素的当前状态是可见还是隐藏，使用.hide()都应确保隐藏元素。

我刚刚找到了一种方法来解决这个类似bug的问题。首先，您需要为手风琴添加类in。然后最初调用.collapse('hide')以折叠手风琴（而不是仅使用HTML代码中的类collapse）：

HTML ：

<!-- add the class "in" and also do this for all other accordions -->
<div class="col-xs-12 panel-collapse collapse in" id="firstAccordion">
     <div>
         First Accordion
     </div>
</div>

<强> JS ：

//Just add this line to intially collapse the accordions
$('#firstAccordion, #secondAccordion').collapse('hide');

单击显式编码以关闭所有引导手风琴的单选按钮将打开它们

1 个答案:

Updated demo.