Question

你好我想隐藏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>

Answer 1

按如下方式更改您的代码。我更喜欢使用 display：block和display：none 来设置visiblity 并且还推荐 jquery $（选择器）.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 让你关闭一个元素的显示;当你使用none时，全部后代元素也关闭了它们的显示。该文件被渲染，好像元素不存在于文档tre
中

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

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

示例使用unobtrusive JavaScript和不引人注目的CSS。

The principles of unobtrusive JavaScript

Answer 3

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

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

3 个答案: