隐藏可见性所占用的额外间距：隐藏

Question

你好，我想隐藏visibility:hidden所花的额外间隔visibility:hidden 。 在代码中，当我选择sort by date它将替换为默认内容，但是当选择sort by topic它将归入按日期排序输出。 但我不要这个。 我想替换sort of topic 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>

Answer 1

如下更改代码。 我更喜欢使用display：block和display：none来设置可见性，并建议使用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>

尝试在代码中更改以上三个功能。

Answer 2

一些阅读：

visibility

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

隐藏值隐藏元素，但保留原本的空间。 折叠值隐藏表格的行或列。 它

也会折叠XUL元素

display

除了许多不同的显示框类型之外，值none可以使您关闭元素的显示。 当您不使用任何元素时，所有后代元素也将关闭其显示。 呈现文档时好像元素在文档tre中不存在

一个基于您的代码但使用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原理

Answer 3

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

隐藏可见性所占用的额外间距：隐藏

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-02-07 05:16:27

解决方案2
1 2015-02-07 06:19:27

解决方案3
0 2015-02-07 05:11:11

隐藏可见性所占用的额外间距：隐藏

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-02-07 05:16:27

解决方案2 1 2015-02-07 06:19:27

解决方案3 0 2015-02-07 05:11:11

解决方案1
1 已采纳 2015-02-07 05:16:27

解决方案2
1 2015-02-07 06:19:27

解决方案3
0 2015-02-07 05:11:11