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

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() {

  // 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");

  });

});

$(document).on("change", "#textfield", function(){

    $("#collapseOne").collapse('hide');

    $("#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">

  <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>

    <div class="panel panel-default">

      <div class="panel-heading">

        <h4 class="panel-title">

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

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

        </h4>

      </div>

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

        <div class="panel-body">

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

        </div>

      </div>

    </div>

  </div>

</div>