Question

我在一些html元素上使用bootstrap collapse类。然后，使用jquery，我动态显示折叠的元素。一个例子：（html：）

<form>
    <div class="checkbox">
        <label><input type="checkbox" id="1">checkbox1</label>
    </div>
    <div class="sub_level collapse">
        <div class="checkbox">
            <label><input type="checkbox" id="2">checkbox2</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" id="3">checkbox3</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" id="4">checkbox4</label>
        </div>
    </div>
</form>

（JavaScript的：）

$(document).ready(function(){

    $("#1").click(function(){
        $("div.sub_level").collapse("toggle");
    });

});

这是jsfiddle：https://jsfiddle.net/DTcHh/10346/

阅读这个问题我已经读过这是导致这个问题的填充。删除填充修复它但我不想删除填充。此外，将折叠元素包装在div中有时可以解决问题，但有时不会。我想知道是否有这个问题的核心原因，以便我可以解决。我尝试使用jquery show / hide并使用style='display:none;'而不是bootstrap collapse类，但这是同样的问题。我不能使用这种简单的动画方法似乎不合逻辑。

谢谢。

Answer 1

以下是使用jQuery的方法，因此您不依赖于Bootstrap collapse。

$('#checkChange').click(function() {
  this.checked ? $('#opened').fadeIn(300) : $('#opened').fadeOut(100);
});

.wrapper {
  padding: 25px 0;
}
#opened {
  display: none;
  background: #f5f5f5;
  padding: 10px 15px;
  margin: 10px 0px;
}
#checkIt .form-control {
  border-radius: 0px;
  height: 50px;
}
input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
}
input[type=checkbox]:checked + label {
  color: #000;
  font-style: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container">
    <div class="row">
      <form name="checkIt" id="checkIt">
        <div class="col-sm-6">
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control" id="email" placeholder="Email" />
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Password" />
          </div>
        </div>
        <div class="col-sm-6">
          <input type="checkbox" id="checkChange" />
          <label for="checkChange">Check It Out</label>
          <div id="opened">
            <div class="checkbox">
              <label>
                <input type="checkbox" id="one" />Check It</label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" id="two" />Check It Out</label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" id="three" />Check It Out Again</label>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Name" />
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

蹩脚的动画引导

1 个答案: