iT邦幫忙

1

jQuery隱藏div

我有個問題,我想在網頁一開始的時候隱藏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邦大師 6 級 ‧ 2018-11-09 13:36:31 檢舉
你不可以在button下面再加顯示的block?
你上層的div隱藏了,當然會連下層的button一起隱藏,這沒辦法做到你要的。
我臨時寫一個與原本程式相似的內容,其中
<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>)
犬千賀 iT邦新手 5 級 ‧ 2018-11-09 14:50:55 檢舉
我不明白 原本的網頁中沒辦法挪出其他空間的意思... 還有你現在是要把div塞在ul裡面嗎?
froce iT邦大師 6 級 ‧ 2018-11-09 14:55:01 檢舉
建議把你原本的html結構,寫在codepen裡面,讓人好改。
因為你要的東西並不難。先把 #test10 用css去做display:none就行,然後按鈕後顯示而已。
但是你的表達讓我們很疑惑你要的到底是不是這個。
沒有呦,div就照上面第三組程式來看,只是他的外層還有一個div,沒有要再塞東西進ul裡面。
沒辦法挪出其他空間的意思是指版面是滿的,還有放其他的東西,而按鈕原本也是設計在右下角(將div隱藏後的畫面),剛才的問題是我要將自動開啟的div隱藏,等有觸發click事件的時候才會開啟。
To froce : 好的,下次發問時我會給完整一點的code。

這問題的部分已經解決了,謝謝大家

1 個回答

2
darwin0616
iT邦新手 2 級 ‧ 2018-11-09 13:24:46
最佳解答

參考我的文章前端User Friendly設計開發part 2中的情境二作法!/images/emoticon/emoticon12.gif

看更多先前的回應...收起先前的回應...

您的情境二的作法我看過了,但跟我想呈現的方式有些不同,所以還是有些不懂。

換個角度想,如果一開始單獨把test4~9的元件個別加上hidden隱藏,而不是div加上hidden,之後按下btn再把test4~9.show(),這樣不是你要的需求嗎?我在情境二的作法是把地址的三個欄位分別隱藏,之後按下修改按鈕才把他們都show出來。我要表達的只有這樣。

原來如此,我懂了,非常感謝

/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答