隱藏可見性所占用的額外間距：隱藏

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