Question

Div结构如下所示：

c：带复选框的div

h：隐藏div

v：visible div

[c1] [h1]

[c2] [h2]

[c3] [h3]

[c4] [h4]

[c5] [h5]

当我点击c3和c4复选框时，我希望它看起来像这样：

[C1]

〔C2〕

[c3] [v3]

[c4] [v4]

[C5]

但它看起来像这样：

[c1] [v3]

[c2] [v4]

[C3]

[C4]

[C5]

我使用bootstrap类，如：＆＃34; row＆＃34;，＆＃34; col-md-4＆＃34;

Answer 1

这不能用于复选框和隐藏div中的引导类，使用自己的样式并在外部div中使用引导程序。

你走了：

＆＃13;

$("#c1").change(function() {
   $("#h1").toggle();

});

$("#c2").change(function() {
   $("#h2").toggle();

});

$("#c3").change(function() {
   $("#h3").toggle();

});

$("#c4").change(function() {
   $("#h4").toggle();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div><input id='c1' type='checkbox'> <span id='h1' style='display:none;'>h1</span></div>
<div><input id='c2' type='checkbox'> <span id='h2'  style='display:none;'>h2</span></div>
<div><input id='c3' type='checkbox'> <span id='h3'  style='display:none;'>h3</span></div>
<div><input id='c4' type='checkbox'> <span id='h4'  style='display:none;'>h4</span></div>

＆＃13;

Answer 2

首先使用visibility: visible设置所有隐藏的div。这将隐藏div，但他们将保留在页面中的位置。

然后，当点击相应的复选框时，您将通过$("#check3").change(function() { $('#v3').css('visibility', 'visible'); }); $("#check4").change(function() { $('#v4').css('visibility', 'visible'); });显示div。

工作代码段

.hidden_div {
    visibility: hidden;
  }

<!DOCTYPE html>
<html>


<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
         
           </head>
<body >
  

<div class="container">
  <div class="row">
    <div class="col-md-4">
     <input id="check1" type="checkbox" value="">
    c1
    </div>
    <div class="col-md-4 hidden_div">
    v1
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
    <input id="check2" type="checkbox" value="">
    c2

    </div>
    <div class="col-md-4 hidden_div">
    v2
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
     <input id="check3" type="checkbox" value="">
    c3
    </div>
    <div id="v3" class="col-md-4 hidden_div">
    v3
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
    <input  id="check4" type="checkbox" value="">
    c4
    </div>
    <div id="v4" class="col-md-4 hidden_div">
    v4
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
     <input id="check5" type="checkbox" value="">
    c5
    </div>
    <div  class="col-md-4 hidden_div">
    v5
    </div>
  </div>
</div>

    
</body>
</html>

col-md-4

注意我已经使用了问题中提到的VisitService visitService = ServiceGenerator.createService(VisitService.class,token); retrofit2.Call<UploadResult> req = visitService.PostImage(vId,picType,body2); req.enqueue(new Callback<UploadResult>() { @Override public void onResponse(Call<UploadResult> call, Response<UploadResult> response) { if (response.isSuccessful()) { if (response.body() != null) { uploadResult = response.body(); //..，所以请查看整页，看看它是否有效。

如何让隐藏的div总是出现在同一个地方？

2 个答案: