javascript - 隐藏其子元素后如何纠正元素的高度？

Question

我有一个表单，当我单击某个单选输入按钮时，我会运行该表单。

<section>  
<Label>Question</Label>
<p> 
<input name='a' type='radio' value=1>value A<br/>
<input name='a' type='radio' value=2>value B<br/>
<input name='a' type='radio' value=3>value C<br/>
<input name='a' type='radio' value=4>valueD</p>
</section>

还有我应用的CSS规则:

div.hidden {
    display: none;
    height: 0px;    
    };

JS代码:

$("input[type='radio']").on("click", function(){
 var allInputs = $(this).parent().find("input");
 var NonChk = $(allInputs).not("input:checked");
 hideSiblings(NonChk,"BR");       
});

当我单击某个按钮时，我想看到的只是当前行:input、text、br。其他行应该隐藏...成功发生，但父级(标记 p)的高度未自动更正(似乎输入的大小仍然不正确 - 但如果这是问题，我不知道。

问题很简单:如何隐藏未选中的输入行？

这是我编写的函数，用于隐藏要隐藏的行上的 sibling 。

function hideSiblings(o, tilNextTagName, hideCurrentTag = true, tilNextTagHide = true){
var i, n, si;
var maxTries = 10;
if ( hideCurrentTag==true )
 {
 $(o).hide();
 // console.log("this node input radio :");
 // console.log(o.nodeName);
 }

for (i=0; i<o.length; i++){
  si = o[i];
  for (n=0; n<maxTries; n++){
    si = si.nextSibling;
    if (typeof si.nodeName === "undefined" )
      return false; 
    if ( si.nodeName == tilNextTagName ){
      // console.log( si.nodeName+" === " + tilNextTagName );
      if ( tilNextTagHide == true )
        $(si).hide();
      return true;
      }
    else
     {
     $(si).wrap("<div class=hidden></div>").hide();
     break; // break inner loop
     }
    }
  }
}

• 我在代码中留下了注释，以便您可以轻松添加 console.log

Answer 1

我已经测试了代码。解决方案非常简单。 br 之所以没有被隐藏，是因为该函数在 br 标签被隐藏之前就返回了。因此，我在正确的位置添加了一行和条件 $(si.nextSibling).hide(); 。这样就不需要进行结构更改。

function hideSiblings(o, tilNextTagName, hideCurrentTag = true, tilNextTagHide = true){
    var i, n, si;
    var maxTries = 10;
    if ( hideCurrentTag==true ) {
     $(o).hide();
     }

    for (i=0; i<o.length; i++){
      si = o[i];
      for (n=0; n<=maxTries; n++){
        si = si.nextSibling;
        if ( !si )
          break; // prevent crash
        if ( si.nextSibling.nodeName="BR" ){
             $(si.nextSibling).hide();
            }
        if ( si.nodeName == tilNextTagName ){
          if ( tilNextTagHide == tilNextTagName ){
            $(si).wrap("<div class=hidden></div>").hide();
            }
          return true;
          }
        else
         {
         $(si).wrap("<div class=hidden></div>").hide();
         }
        }
      }
}