javascript - 显示 : none still inheriting

Question

即使样式表被禁用，动态创建的表单也会呈现奇怪的。

表单根据选择的选项显示和隐藏范围广泛的详细信息。

因此，例如，下面的一些内容将使用 C#.net 呈现...

formOutput += "<div class=\"field textBox\" id=\"" + field.Id + "\"><div class=\"labelTB\"><label for=\"" + field.Id + "\" class=\"" + reqClass + "\">" + field.Name + requirement + "</label></div>" +
        "<input type=\"text\" class=\"numInput\" id=\"" + field.Id + "_tb\" name=\"" + field.Name + "\" onkeyup=\"Service.refresh(this); numCheck(this)\" onclick=\"numCheck(this)\" />" +
        // numButtons:
        "<div class=\"minus plusMinus\" id=\"minus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div>" +
        "<div class=\"plus plusMinus\" id=\"plus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div></div><br />";

...然后父节点被JS隐藏onload:

var setVisibility = function (id, bool) {
  try {
        get(id).style.display = (bool) ? "block" : "none";  
   } catch (e) {
     return false;
   }   
  return bool;
}

但是，当存在大量隐藏字段时，我的表单中间会出现相当大的空间。

我尝试了各种解决方案，但收效甚微。简单地将所有内容向上移动并不容易(表格比我在这里展示的要复杂得多)...

我什至尝试过以下方法:

var setVisibility = function (id, bool) {
  try {
    get(id).style.display = (bool) ? "block" : "none";
    get(id).style.position = (bool) ? "relative" : "absolute";
    get(id).style.height = (bool) ? "auto" : "0px";
    var children = get("containerType").childNodes
    for (var i in children) {
      if (children[i].style) {
        children[i].style.display = (bool) ? "block" : "none";
        children[i].style.position = (bool) ? "relative" : "absolute";
        children[i].style.height = (bool) ? "auto" : "0px";
      }
    }
  } catch (e) {
    return false;
  }
  return bool;
}

是什么导致了这个问题？有解决办法吗？

(见下图)

Answer 1

代码末尾有一个 br-tag(在 id=plus_ 的 div 之后？？)，无论您是否隐藏 div，它都会始终显示。你可以在其中一个 div 中添加 br-tag 来实现你想要的

formOutput += "<div class=\"field textBox\" id=\"" + field.Id + "\"><div class=\"labelTB\"><label for=\"" + field.Id + "\" class=\"" + reqClass + "\">" + field.Name + requirement + "</label></div>" +
        "<input type=\"text\" class=\"numInput\" id=\"" + field.Id + "_tb\" name=\"" + field.Name + "\" onkeyup=\"Service.refresh(this); numCheck(this)\" onclick=\"numCheck(this)\" />" +
        // numButtons:
        "<div class=\"minus plusMinus\" id=\"minus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div>" +
        "<div class=\"plus plusMinus\" id=\"plus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div><br /></div>";

...或者您可以只为 br-tag 提供类或 id，并使用它与 div 一起显示和隐藏