Question

如何自动将div的大小调整为可见内容？我有一个显示单选按钮的页面，但用户可以选择仅查看特定数量的单选按钮。当我单击我的复选框以隐藏元素时它们会消失。然而div保持相同的大小。我该如何解决这个问题？

代码

<script>
function getElementsByClass( searchClass, domNode, tagName) { 
    if (domNode == null) domNode = document;
    if (tagName == null) tagName = '*';
    var el = new Array();
    var tags = domNode.getElementsByTagName(tagName);
    var tcl = " "+searchClass+" ";
    for(i=0,j=0; i<tags.length; i++) { 
        var test = " " + tags[i].className + " ";
        if (test.indexOf(tcl) != -1) 
            el[j++] = tags[i];
    } 
    return el;
}
function checkChange(checkbox)
{
  if (checkbox.checked)
  {
      if(checkbox.value == "Intel"){
          var tabs = getElementsByClass('Intel');
          for( i=0; i < tabs.length; i++)
              tabs[i].style.display='none';
      }
  }else if(!checkbox.checked)
  {
       if(checkbox.value == "Intel"){
          var tabz = getElementsByClass('Intel');
          for (i =0; i < tabz.length; i ++)
              tabz[i].style.display="inline";}
      }
  }
</script>

<form action="">
<input type="checkbox" name="category" value="Intel" onclick="checkChange(this)" /> Intel processoren<br>
<input type="checkbox" name="category" value="Amd" onclick="checkChange(this)" /> AMD processoren<br>
</form>
</div>
<div id="items">
<form action="get.jsp?value=Processoren" method="post">
// JSP CODE FOR ALL CHECKBOXES !!!//
<hr>
<input type="submit" value="Send">
</div>
</div>

Answer 1

要使div自动调整为可见内容，您应将其样式设置为'display：block'和'overflow：visible'。

请参阅以下示例：

$(document).ready(function(){
  
  $("#case1cnt").hide();
  $("#case2cnt").hide();
  $("#case3cnt").hide();
  
  $("#case1").click(function(){
    $("#case1cnt").toggle();
  });
  $("#case2").click(function(){
    $("#case2cnt").toggle();
  });
  $("#case3").click(function(){
    $("#case3cnt").toggle();
  });  
})

#content {
  display: block;
  overflow: visible;
  margin-top: 16px;
  padding: 8px;
  background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="case1" type=checkbox /> Case 1<br />
<input id="case2" type=checkbox /> Case 2<br />
<input id="case3" type=checkbox /> Case 3<br />
<div id=content>
  <p>Static content</p>
  <p id="case1cnt">Case 1 content</p>
  <p id="case2cnt">Case 2 content</p>
  <p id="case3cnt">Case 3 content</p>
<div>

HTML DIV显示无元素调整大小

1 个答案: