手风琴，如何自动折叠一个并展开下一个

Question

我有一个带有三个“面板”的手风琴，第一个是在初始负载时展开的。

第一个面板有一个输入字段。当用户更新此字段时，我想自动展开下一个面板并折叠当前面板。

它自己的手风琴按预期工作（我在页面上有 jquery 可用）。

我已经搜索过并且仅通过单击链接/按钮找到了展开/折叠的示例。

我怎么做？

这是我的代码：

$(document).ready(function() {

  // Add minus icon for collapse element which is open by default

  $(".collapse.in").each(function() {

    $(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");

  });

  // Toggle plus minus icon on show hide of collapse element

  $(".collapse").on('show.bs.collapse', function() {

    $(this).parent().find(".glyphicon").addClass("rotate");

  }).on('hide.bs.collapse', function() {

    $(this).parent().find(".glyphicon").removeClass("rotate");

  });

});

<div class="bs-example">

  <div class="panel-group" id="accordion">

    <div class="panel panel-default">

      <div class="panel-heading">

        <h4 class="panel-title">

          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span

                            class="glyphicon glyphicon-menu-right"></span> Text</a>

        </h4>

      </div>

      <div id="collapseOne" class="panel-collapse collapse in">

        <div class="panel-body">

          <div class="row">

            <div class="col-sm-3">

              <label for="text">Text</label>

            </div>

            <div class="col-sm-1"></div>

            <div class="col-sm-8">

              <input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">

              <br />

            </div>

          </div>

        </div>

      </div>

    </div>

    <div class="panel panel-default">

      <div class="panel-heading">

        <h4 class="panel-title">

          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span

                            class="glyphicon glyphicon-menu-right"></span> More text</a>

        </h4>

      </div>

      <div id="collapseTwo" class="panel-collapse collapse">

        <div class="panel-body">

          <h4 class="panel-title">More text</h4>

        </div>

      </div>

    </div>

Answer 1

你可以在这个片段中找到一个有效的解决方案。这个想法是手动操作引导折叠元素。$(document).ready(function() {&nbsp; // Add minus icon for collapse element which is open by default&nbsp; $(".collapse.in").each(function() {&nbsp; &nbsp; $(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");&nbsp; });&nbsp; // Toggle plus minus icon on show hide of collapse element&nbsp; $(".collapse").on('show.bs.collapse', function() {&nbsp; &nbsp; $(this).parent().find(".glyphicon").addClass("rotate");&nbsp; }).on('hide.bs.collapse', function() {&nbsp; &nbsp; $(this).parent().find(".glyphicon").removeClass("rotate");&nbsp; });});$(document).on("change", "#textfield", function(){&nbsp; &nbsp; $("#collapseOne").collapse('hide');&nbsp; &nbsp; $("#collapseTwo").collapse('show');});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="bs-example">&nbsp; <div class="panel-group" id="accordion">&nbsp; &nbsp; <div class="panel panel-default">&nbsp; &nbsp; &nbsp; <div class="panel-heading">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="panel-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="glyphicon glyphicon-menu-right"></span> Text</a>&nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="collapseOne" class="panel-collapse collapse in">&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="text">Text</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-1"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-8">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="panel panel-default">&nbsp; &nbsp; &nbsp; <div class="panel-heading">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="panel-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="glyphicon glyphicon-menu-right"></span> More text</a>&nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="collapseTwo" class="panel-collapse collapse">&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="panel-title">More text</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="panel panel-default">&nbsp; &nbsp; &nbsp; <div class="panel-heading">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="panel-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="glyphicon glyphicon-menu-right"></span> Even more text</a>&nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="collapseThree" class="panel-collapse collapse">&nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="panel-title">More text</h4>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>