2014-09-26 2 views
0

Относительно моего другого сообщения ранее - Show/hide section based on dropdown -js, на который ответил @Moob. У меня теперь есть еще одна проблема. С тем же кодом - всякий раз, когда страница перезагружается, после раскрывающегося списка появляется огромный пробел, где текст будет отображаться, если выбран определенный выбор. Любые идеи, почему это так?Показать/скрыть функцию -extra white space

Вот codepen.io: http://codepen.io/Nestalna/details/qpjsy

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> 
<script type="text/javascript"> 
    function show(aval) {  
     if (aval == "0") {//if 1 then show it 
      optionyes.style.visibility='visible'; 
      optionyes.style.display='block'; 
      Form.fileURL.focus(); 
    } 
     else {//for everything else hide it 
      optionyes.style.visibility='hidden'; 
      optionyes.style.display='none'; 
    }  
} 
</script> 

<div class="row"> 
      <label id="title" for="degree">Which degree are you interested in? </label><br /> 

       <select id="degree" name="degree" onchange="java_script_:show(this.options[this.selectedIndex].value)" > 
        <option selected="selected" value="Please select one"> Please select one </option> 
        <option value="0" > Concurrent Enrolment </option> 
        <option value="1" > 2015 Applied Bioethics Summer Study </option> 
        <option value="2"> Non Degree (9 hours or less) </option> 
       </select> 
     </div>  

     <div id="optionyes" style="visibility:hidden" >You have selected <strong>red option</strong> so i am here Lorem ipsum dolor sit amet, mel fugit epicuri laboramus ei, modo elit elitr sea te. Debitis adipisci per ne, qui ea quem nonumy possit, ea falli suscipiantur eam. Ei recteque partiendo deterruisset has. Dicit detracto similique his ad, has liber atomorum prodesset ea, cu dicant vocibus electram est. 

Qui eu putent sadipscing, vis dolore fabulas cu, nec hinc justo laoreet cu. Est in dicant iudicabit elaboraret. Admodum imperdiet necessitatibus ea vim, no agam atqui definitionem his. Pri ea iriure efficiantur, accumsan assueverit vim ut. Ea vim quem nobis perfecto, probo nusquam consectetuer ne sed, vis dolorem corrumpit ea. 

Mucius appetere duo id. Cum sale mazim ei. Vix melius intellegam ut. Mei ea audire delenit urbanitas. Cu eum civibus corrumpit dissentiunt, in augue prompta splendide eum. 

Mei in augue nulla partem, at usu falli euismod. Regione recteque aliquando ad mei, posse soluta dicunt ex nec. Quis phaedrum scripserit ad vis, ex theophrastus necessitatibus ius, usu in veri errem dolores. Ea his latine dolorum. Id nec malis decore expetendis, atqui soleat nominati ius at.</div> 

<div class="row"> 
      <label for="fname">First Name:</label><br /> 
      <input id="fname" class="input" name="fname" type="text" value="" size="30" /><br /> 
     </div> 

     <div class="row"> 
      <label for="lname">Last Name:</label><br /> 
      <input id="lname" class="input" name="lname" type="text" value="" size="30" /><br /> 
     </div> 

     <div class="row"> 
      <label for="mname">Middle Name:</label><br /> 
      <input id="mname" class="input" name="mname" type="text" value="" size="30" /><br /> 
     </div> 

ответ

1

Этот пробел есть, потому что visibility: hidden; в отличие от display: none; сохранит занятое пространство и не освободит его. В перспективе механизма компоновки visibility: hidden; ничего не значит, только механизм рендеринга не будет отображать эту часть.

Изменить <div id="optionyes" style="visibility:hidden" > на <div id="optionyes" style="display:none" >

0

Поскольку вы установили видимость скрытой, а не удаляет элемент, он просто не отображает его в то же время занимая исходное количество пространство.

<div id="optionyes" style="visibility:hidden"> 

Используйте display:none, если вы хотите, чтобы действовать, как он не существует на странице.