曾經寫顯示隱藏老是用jq方法控制：

dom.show();
dom.hide();

事實上這樣還是有非常多缺陷的。

這是html結構：

    <div class="holi">
        here are some test words
    </div>
    <div id="button">點擊顯示</div>

假設使用position:absolute和top－9999px控制點隱藏

        .holi{
            width: 200px;
            height
 
: 200px;
            border: 1px solid red;
            position: absolute;
            visibility: hidden;
        }

這時候應該這樣用jq讓他顯示比較好

        $(function(){
            $(‘#button‘).click(function(){
                $(‘.holi‘).css({
                    ‘position‘:‘static‘,
                })
            })
        })
 

假設是position: absolute＋visibility: hidden;控制的 隱藏的話：

即

        .holi{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: absolute;
            visibility: hidden;
        }

此時應該這樣用jq控制顯示：

        $(function(){
            $(‘#button‘).click(function
 
(){
                $(‘.holi‘).css({
                    ‘position‘:‘static‘,
                    ‘visibility‘:‘visible‘
                })
            })
        })

當然還有show hide直接調用這樣的方法全然隱藏。

元素隱藏與顯示是我們在頁面制作與交互效果實現中非經常見的，假設您僅僅是使用display:none與display:block/inline來實現DOM元素的顯隱控制。那你就out了。

假設希望隱藏內容能夠被輔助閱讀設備識別。就不能使用display:none以及visibility:hidden隱藏元素。

能夠使用模擬隱藏的隱藏方法，又稱可用性隱藏。absolute＋top：－9999px。 假設你是希望全然隱藏的，那就能夠使用display:none或visibility:hidden。

CSS 相對/絕對(relative/absolute)定位與jQuery的控制顯示隱藏