隐藏可见性:隐藏的额外间距 - hide the extra spacing taken by visibility:hidden

你好，我想隐藏visibility:hidden采取的额外间距。在代码中，当我选择sort by date时，它被默认内容替换，但是当选择sort by topic时，它会按日期输出排序。但我不想要这个。我想将sort of topic的 o/p 替换为 sort by date .我认为这是因为使用了visibility:hidden.谁能建议我如何删除该空间。我也用过display:none，但没有用。

<html>
<head>
<script>
function onloadfun()
{
  document.getElementById("hideall").style.visibility="hidden";
}
function optionCheck()
{
    if( document.getElementById("sorting").value=="bydate")
    {
        document.getElementById("topic1").style.visibility ="visible";
        document.getElementById("topic").style.visibility ="hidden";
        document.getElementById("showByDefault").style.display ="none";
    }
    if( document.getElementById("sorting").value =="bytopic")
    {
        document.getElementById("topic1").style.visibility ="hidden";
        document.getElementById("topic").style.visibility ="visible";
        document.getElementById("showByDefault").style.display ="none";
    }
// validation of dropdownlist
    var x = document.getElementById("sorting");
    var option = x.options[x.selectedIndex].value;
    var strUser1 = x.options[x.selectedIndex].text;
    if(option=="s")
    {
        document.form.options.focus();
        return false;
    }
return true;    
}
</script>
</head>
<body onLoad="onloadfun()">
<form name="form">
<select id="sorting" style="width:140px" onChange="optionCheck()">
  <option id="s">---Sort By----</option>
  <option value="bydate">Sort By Date</option>
  <option value="bytopic">Sort By Topic</option>  
</select>
</form>
<br /><br /><hr /><br /><br />
<?php   include 'connection.php';  ?>
<div id="showByDefault">
<?php
  echo "default content";   
?>
</div>
<div id="hideall">
    <div id="topic1">
      <?php echo "hideing 1"; ?>
    </div>
    <div id="topic">
      <?php echo "hideing 2"; ?>
    </div>
</div>
</body>
</html>

一些阅读：

visibility

可见性 CSS 属性有两个用途：

隐藏的值隐藏元素，但会在其应保留的位置留出空间一直。折叠值隐藏表的行或列。它

还折叠了XUL元素

display

除了许多不同的显示框类型外，值 none 允许您关闭元素的显示;当您使用无时，所有后代元素的显示也处于关闭状态。A. 文档呈现为该元素在文档中
不存在

基于您的代码但使用 display 并由使用 Element.classList 的class设置的示例。

var sorting = document.getElementById('sorting'),
    showByDefault = document.getElementById('showByDefault'),
    topic = document.getElementById('topic'),
    topic1 = document.getElementById('topic1');
sorting.addEventListener('change', function optionCheck(e) {
    var target = e.target;
    if (target.value === 's') {
        console.log('Do something here.');
    } else if (target.value === 'bydate') {
        topic1.classList.remove('hide');
        topic.classList.add('hide');
        showByDefault.classList.add('hide');
    } else if (target.value === 'bytopic') {
        topic1.classList.add('hide');
        topic.classList.remove('hide');
        showByDefault.classList.add('hide');
    }
}, false);

#sorting {
    width: 140px;
}
hr {
    margin-top: 2em;
    margin-bottom: 2em;
}
.hide {
    display: none;
}

<form name="form">
    <select id="sorting">
        <option value="s">---Sort By----</option>
        <option value="bydate">Sort By Date</option>
        <option value="bytopic">Sort By Topic</option>
    </select>
</form>
<hr>
<div id="showByDefault">"default content";</div>
<div id="topic1" class="hide">"hiding 1";</div>
<div id="topic" class="hide">"hiding 2";</div>

该示例使用unobtrusive JavaScript且不显眼的 CSS。

不显眼的JavaScript的原则

按如下方式更改代码。我更喜欢使用显示：块和显示：无而不是设置可见性并且还推荐jquery $(selector(.show((和$(selector(.hide((方法。

        <html>
<head>
    <script>
        function onloadfun() {
            document.getElementById("hideall").style.display = "none";
        }
        function optionCheck() {
            if (document.getElementById("sorting").value == "bydate") {
                document.getElementById("hideall").style.display = "block";
                document.getElementById("topic1").style.display = "block";
                document.getElementById("topic").style.display = "none";
                document.getElementById("showByDefault").style.display = "none";
            }
            if (document.getElementById("sorting").value == "bytopic") {
                document.getElementById("hideall").style.display = "block";
                document.getElementById("topic1").style.display = "none";
                document.getElementById("topic").style.display = "block";
                document.getElementById("showByDefault").style.display = "none";
            }
            // validation of dropdownlist
            var x = document.getElementById("sorting");
            var option = x.options[x.selectedIndex].value;
            var strUser1 = x.options[x.selectedIndex].text;
            if (option == "s") {
                document.form.options.focus();
                return false;
            }
            return true;
        }
    </script>
</head>
<body onLoad="onloadfun()">
    <form name="form">
        <select id="sorting" style="width:140px" onChange="optionCheck()">
            <option id="s">---Sort By----</option>
            <option value="bydate">Sort By Date</option>
            <option value="bytopic">Sort By Topic</option>
        </select>
    </form>
    <br />
    <br />
    <hr />
    <br />
    <br />
    <?php //include 'connection.php'; ?>
    <div id="showByDefault">
        <?php echo "default content"; ?>
    </div>
    <div id="hideall">
        <div id="topic1">
            <?php echo "hideing 1"; ?>
        </div>
        <div id="topic">
            <?php echo "hideing 2"; ?>
        </div>
    </div>
</body>

尝试更改代码中的上述三个函数。

使用 display：none 而不是隐藏可见性。
请参阅示例：http://www.w3schools.com/css/css_display_visibility.asp