Аккордеон, как автоматически свернуть одну и развернуть следующую - PullRequest
Новая
       19

Аккордеон, как автоматически свернуть одну и развернуть следующую

1 голос
/ 01 октября 2019

У меня есть гармошка с тремя "панелями". Первая развернута при начальной нагрузке.

Первая панель имеет поле ввода. Когда пользователь обновил это поле, я хотел бы автоматически развернуть следующую панель и свернуть текущую панель.

Аккордеон сам по себе работает, как и ожидалось (у меня есть 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>

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

1 Ответ

2 голосов
/ 01 октября 2019

вы можете найти рабочее решение в этом фрагменте. Идея состоит в том, чтобы вручную манипулировать элементами коллапса при загрузке. 

$(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>
...