jQuery隱藏div

jquery

sinceremei 2018-11-09 13:16:41 ‧ 3596 瀏覽

分享至

我有個問題，我想在網頁一開始的時候隱藏div，當我按下Button的時候div中的內容再打開。
我看大部分的範例都是div已經顯示，然後讓使用者按隱藏的Button才不見，所以都會用到click，但我是一開始就要隱藏，用hide的話會把div整個隱藏起來，而原本的網頁中我沒辦法挪出其他空間給Button，所以我Button必須放在div中，所以想問我可以怎麼做??
(在有問題的code中，div中的Button擺放位置是在右上方)

<script>
    $(window).resize(function() {
    $('div').css({height:$(window).height()-$('body').height()-80});
    }).trigger('resize'); //因為有問題的程式中有寫這段，怕也會有引響，所以就放上來了
    $(document).ready(function(){
        $("#hidebtn").click(function(){
            $("div").hide(1000,"linear",function(){
            });
        });
    });
</script>

因為隱藏div的話Button也會跟著隱藏，所以我就先沒有隱藏。

<body>
<div>
    <button class="hidebtn">隐藏</button><br>
    隐藏及设置回调函数
</div>
</body>

下方程式與原本程式類似與上方範例無關


<div id ="test1" class="classtest1">
    <ul id="test12" class="classtest2">
        <li class="classtest3" id="test3">
            <a id="test4"></a>
        </li>
        <li class="classtest4" style="width: 100px;">
            <input type="checkbox" id="test5">
            <label id="test6" style="width: 40%;"></label>
        </li>
        <li class="classtest5" style="width: 100px;">
            <input type="checkbox" id="test7">
            <label id="test5" style="width: 40%;"></label>
        </li>
        <li class="classtest6" style="width: 100px;">
            <input type="checkbox" id="test8" >
            <label id="test9" style="width: 40%;"></label>
        </li>
        
        //從下面<li>到</li>是要顯示的部分
        <li class="classtest7" id="test10">
            <i class="classtest8"></i>
            <i class="classtest9"></i>
        </li>
    </ul>
    <div id="test11" style="height: 82vh"></div>
</div>

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2018-11-09 13:36:31 檢舉

你不可以在button下面再加顯示的block？
你上層的div隱藏了，當然會連下層的button一起隱藏，這沒辦法做到你要的。

sinceremei iT邦新手 5 級 ‧ 2018-11-09 14:10:07 檢舉

我臨時寫一個與原本程式相似的內容，其中
<li class="classtest7" id="test10">
<i class="classtest8"></i>
<i class="classtest9"></i>
</li>
的部份是我想顯示的東西，雖然外層還有一個div，但那div是不能隱藏的(裡面還有另一個不同內容的div，格式如下
--> <div>
<div></div>//這部分的內容在最上方
<div></div>//這是要隱藏的div，<i></i>的部分放要在最下方顯示
</div>)