javascript - jQuery:折叠在页面加载时不起作用

Question

请看一下这个片段:

$("document").ready(function () {    
  $("#eth0_mode").change(function () {
    $("#group").find(":input").prop("disabled", this.value === "dhcp");
    $("#group").collapse(this.value === "dhcp" ? "hide" : "show");
  });

  $("#eth0_mode").val("dhcp").trigger("change");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<form>
  <select class="form-control" id="eth0_mode">
    <option value="dhcp">DHCP</option>
    <option value="fallback">DHCP with fallback</option>
    <option value="static">Static address</option>
  </select>

  <div id="group">
    <input class="form-control" type="text" placeholder="address">
  </div>
</form>

在页面加载时，它将选择的值设置为“dhcp”并触发更改事件。该事件被执行是因为输入字段将被禁用。但 div 并没有折叠!

但是如果您选择另一个项目并返回“dhcp”，div 将崩溃。

为什么？

Answer 1

您需要将 collapse 类添加到 #group 元素中才能使其正常工作:

$("document").ready(function () {
  $("#eth0_mode").change(function () {
    $("#group").find(":input").prop("disabled", this.value === "dhcp");
    $("#group").collapse(this.value === "dhcp" ? "hide" : "show");
  });

  $("#eth0_mode").val("dhcp").trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<form>
  <select class="form-control" id="eth0_mode">
    <option value="dhcp">DHCP</option>
    <option value="fallback">DHCP with fallback</option>
    <option value="static">Static address</option>
  </select>

  <div id="group" class="collapse show">
    <input class="form-control" type="text" placeholder="address">
  </div>
</form>