Как исправить высоту элемента после того, как я спрятал его детей?

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");       
});

Когда я нажимаю какую-то кнопку, все, что я хочу видеть, это текущая строка: ввод, текст, бр.Остальные строки должны быть скрыты ... Это успешно происходит, но высота родительского элемента (тег p) не корректируется автоматически (кажется, что входные данные по-прежнему имеют неправильный размер - но IDK, если это проблема.

Вопрос прост: как скрыть строки входов, которые не выделены?

Это функция, которую я пишу, чтобы скрыть братьев и сестер на линиях, которые должны быть скрыты.

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();
         }
        }
      }
}

Answer 2

Ваш код должен работать, если вы сделаете некоторые незначительные изменения, например, вместо использования тегов прерывания, я поместил каждую радиокнопку в метку и установил ее отображение для блокировки.Теперь это означает, что ваш селектор allInputs больше не работает, так как изменилась структура html.Чтобы это исправить, просто используйте тот же селектор, который вы использовали в прослушивателе событий щелчка.

Пример:

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
     }
    }
  }
}

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

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

p { background: orange; } 

label { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>  
  <label>Question</label>
  <p>
    <label>
      <INPUT name='a' type='radio' value='1' /> value A
    </label>
    <label>
    <INPUT name='a' type='radio' value='2' /> value B
    </label>
    <label>
      <INPUT name='a' type='radio' value='3' /> value C
    </label>
    <label>
      <INPUT name='a' type='radio' value='4' /> valueD
    </label>
  </p>
</section>