在.trigger（单击）事件之后聚焦或滚动到输入元素

Question

我有一些JQuery使用.trigger事件来打开/关闭引导崩溃容器，但是在容器打开后立即滚动到元素时出现问题。

容器打开后，我需要在容器打开后滚动或聚焦当前"input[required]"。但这样做我没有这么高兴。

以下是正在做的事情的一个例子。

＆＃13;

＆＃13;

$(document).on("click", ".savechanges", function() {
  $("input[required]").on("invalid", function(event) {
    var collaspe = $(this).closest('.collapse').hasClass("in");
    if (!collaspe) {
      $(this).closest('.panel').find('img').trigger("click");
      $(this).focus();
    } else if (collaspe) {
      $("input[required]").off();
    } else {
      console.log("Do Nothing");
      return false;
    }
  });
});

＆＃13;

.container {
  width: 75%;
}
.head {
  background: #D9DBDE;
}
.panel-heading {
  background-color: #D9DBDE;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 0;
}
.panel-title {
  font-size: 21px;
  display: block;
  width: 100%;
  color: #4F5858;
  line-height: 1.3;
  font-weight: normal;
}
.panel-icon {
  width: 30px;
  padding: 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form action="/update" id="formwrite">
  <div class="panel-group secondary-bridge container" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title va-middle">Testing
					<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
					</h4>
      </div>
      <div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-default">
          <div class="panel-body row fieldpos">
            <fieldset class="form-group">
              <label for="test">test 1</label>
              <input type="text" class="form-control" id="test" placeholder="test">
            </fieldset>
            <fieldset class="form-group">
              <label for="test">test 2</label>
              <input type="text" class="form-control" id="test" placeholder="test">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 3">test 3</label>
              <input type="email" class="form-control" id="test 3" placeholder="test">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 4">test 4</label>
              <input type="email" class="form-control" id="test 4" placeholder="test">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 5">test 5</label>
              <input type="email" class="form-control" id="test 5" placeholder="test">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 6">test 6</label>
              <input type="email" class="form-control" id="test 3" placeholder="">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="">
            </fieldset>
            <fieldset class="form-group">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="" required>
            </fieldset>
            <fieldset class="form-group">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="">
            </fieldset>
            <fieldset class="form-group textwide">
              <label for="test 7">test 7</label>
              <input type="email" class="form-control" id="test 7" placeholder="">
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-success form-control savechanges">Save Changes</button>
</form>

＆＃13;

＆＃13;

＆＃13;

以下是JSFiddle.

任何人都知道如何完成这项工作或提出建议？

Answer 1

您可以使用scrollIntoView() DOM API方法并从相关的bootstrap事件中调用它：

$('#accordion').on('shown.bs.collapse', function (e) {
    $('input:focus').prev()[0].scrollIntoView()
});

-jsFiddle