我有個問題,我想在網頁一開始的時候隱藏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>
參考我的文章前端User Friendly設計開發part 2中的情境二作法!