display：none仍然继承

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节点隐藏了父节点：

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，并使用它来显示和隐藏divs