Question

关于我之前的其他帖子 - 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>

Answer 1

存在差距，因为与visibility: hidden;不同的display: none;将保留占用的空间而不会释放它。在布局引擎的角度来看，visibility: hidden;并不意味着什么，只有渲染引擎才会呈现那个部分。

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

Answer 2

因为您将可见性设置为隐藏，并且没有删除该元素，所以它仍然不会占用原始空间量时显示它。

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

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

显示/隐藏功能 - 提示空白区域

2 个答案: