显示/隐藏功能 - 额外的空白区域

关于我的其他文章早些时候 - Show/hide section based on dropdown -js得到了回答@Moob我现在有另一个问题。使用相同的代码 - 每次页面重新加载时，如果选择了某个选项，则在下拉菜单将显示的文本之间存在巨大差距。任何想法，为什么它这样做？显示/隐藏功能 - 额外的空白区域

这里是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>

来源

2014-09-26 Nestalna

那个差距在那里，因为visibility: hidden;不像display: none;会保持占用的空间而不是释放它。在布局引擎的角度来看，visibility: hidden;并不代表什么，只有渲染引擎不会渲染该部分。

将<div id="optionyes" style="visibility:hidden" >更改为<div id="optionyes" style="display:none" >

来源

2014-09-26 21:20:32 Zenorbi

因为你设置了能见度为隐藏，并且不移除元素，它只是不显示出来，同时还占用原来的量空间。

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

如果您希望它在页面中不存在，请使用display:none。

来源

2014-09-26 21:20:17 j08691

显示/隐藏功能 - 额外的空白区域

回答

相关问题